What You'll Find Here

Gain an in-depth understanding of how Workflow Kit is built, one step at a time.

How Workflow Kit Is Built, Step By Step

This section explains in full detail how every part of Workflow Kit is built from the ground up. Download the repo below and let this guide walk you through it. It is organized into a series of folders that progressively build on each other, step by step.

👉 Workflow Kit — Step By Step

The things that we'll cover are the following ones:

• React Flow Abstraction Layer: Learn how the abstraction layer built on top of React Flow is implemented and how to use it effectively.
• Model View Controller: See how to structure your code using the MVC architecture to separate data, UI, and behavior.
• Workflow Elements: Build a basic workflow using foundational elements, each representing a key piece of logic within the system.
• Workflow Widgets: Add interactive widgets to your workflow to enable additional capabilities and enhance the overall user experience for your users.
• Drag and Drop Functionality: Implement drag-and-drop functionality to allow users to move elements freely within the workflow.
• Undo and Redo System: Add undo and redo capabilities to let users navigate between previous and future states with ease.
• Detect and Show Errors: Detect invalid states within the workflow and clearly display helpful feedback to guide the user toward fixing them.
• Workflow to JSON: Transform workflows into a structured JSON format that can be easily stored in databases, retrieved when needed, or versioned over time.
• Center Node Functionality: Automatically center the viewport on a specific node when relevant changes occur, helping users stay focused.
• Controls and MiniMap: Enhance the workflow with a mini map and intuitive controls for zooming and fitting the entire workflow within the viewport.