Workflow Kit Blog
News and updates from the team behind Workflow Kit.
React Flow Undo Redo: Workflow Editor History (Part 4)
This is the fourth part of a series on building a workflow editor on top of React Flow. In this part, you'll learn how to add undo and redo to your workflow editor by keeping a full record of past and future states, rather than just the current one.
React Flow Drag and Drop: Advanced Interactions for Your Workflow Editor (Part 3)
This is the third part of the series on building a workflow editor with React Flow. In this part, you'll learn the key concepts behind implementing drag and drop in your workflow editor, making it easier for users to reorganize nodes intuitively.
React Flow Architecture: How to Structure a Workflow Editor with MVC (Part 2)
This is the second part of the series on building a workflow editor with React Flow. In this part, you will learn how to apply a Model View Controller architecture to keep the workflow state, its visual representation, and the logic that connects them in separate layers.
React Flow Tutorial: Build a Workflow Editor (Part 1)
React Flow is a powerful library for building node-based editors, but if we want to build a workflow editor like the one shown below, we will need to write a fair amount of code on top of it. This is the first part of a series on building a workflow editor from scratch. We will start by explaining why building an abstraction layer on top of React Flow makes a lot of sense and how to go about it.
React Flow Auto Layout: How to Automatically Position Nodes for Workflow Editors
React Flow gives you full control over where nodes are placed — which is great until you realize you don't want to place them yourself. For workflow editors, manually positioning every node is tedious and fragile. A layout algorithm handles it for you, so you can focus on the logic instead.