What you'll find here

You'll learn how Workflow Kit is built through a series of step-by-step repositories.

How Workflow Kit is built, step by step

This section walks you through how Workflow Kit is built by guiding you across a series of repositories - each one building on the last. By following this progression, you'll gain a deep understanding of how all the pieces come together.

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 / 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.