Workflow Editor

The Workflow Editor template is a Next.js-based application designed to help you quickly create, manage, and visualize workflows. Built with React Flow UI and styled using Tailwind CSS  and shadcn/ui , this project provides a highly customizable foundation for building and extending workflow editors.

Tech Stack

• React Flow UI: The project uses React Flow UI to build nodes. These components are designed to help you quickly get up to speed on projects.

• shadcn CLI: The project uses the shadcn CLI  to manage UI components. This tool builds on top of Tailwind CSS  and shadcn/ui  components, making it easy to add and customize UI elements.

• State Management with Zustand: The application uses Zustand for state management, providing a simple and efficient way to manage the state of nodes, edges, and other workflow-related data.

Features

• Automatic Layouting: Utilizes the ELKjs  layout engine to automatically arrange nodes and edges.
• Drag-and-Drop Sidebar: Add and arrange nodes using a drag-and-drop mechanism.
• Customizable Components: Uses React Flow UI and the shadcn library to create highly-customizable nodes and edges.
• Dark Mode: Toggles between light and dark themes, managed through the Zustand store.
• Runner Functionality: Executes and monitors nodes sequentially with a workflow runner.