JS Nation

JSNation 2025

Łukasz Jaźwa

Build and Customize a Node-Based Workflow Builder With React

React Summit

React Summit 2025

Node-based user interfaces offer an intuitive and powerful way to represent complex data flows and processes. In this interactive 3-hour workshop, you’ll learn how to create engaging diagram UIs using React and the popular React Flow library. We’ll start by exploring key libraries for creating custom diagram UIs, comparing their strengths, differences, and most effective use cases. Focusing on React Flow, we’ll then build a workflow application together, introducing features such as custom nodes and edges, drag-and-drop functionality, state management, minimap and zoom controls, auto- layout, and property-editing sidebar. You’ll discover how to leverage open-source UI components designed for diagramming to enhance visual appeal and learn how to extend diagrams with custom functionality. We’ll also look at existing tools and products that can streamline your development process – so you can concentrate on implementing your business logic efficiently. By the end of this workshop, you’ll know how to unlock the potential of node-based UIs in React, enabling you to create rich, interactive applications tailored precisely to your project’s needs.Workshop Agenda:<ul><li>Introduction to Diagram Libraries</li><li>Building a Workflow Application with React Flow</li><li>Implementing Advanced Interaction and Usability Features</li><li>Enhancing the User Experience</li><li>Extending and Scaling Your Node-based UI</li></ul>Please note that this workshop assumes a comfortable working knowledge of React, so we can focus on building advanced features right from the start.