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 Components and styled using Tailwind CSS and shadcn/ui , this project provides a highly customizable foundation for building and extending workflow editors.
This is a Pro template. Get all pro examples, templates, 1:1 support from the xyflow team and prioritized Github issues with a React Flow Pro subscription.
Tech Stack
-
React Flow Components: The project uses React Flow Components 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 Components 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.