Building AI workflow editor UI in React with React Flow and Workflow Builder SDK

Описание: Learn how to design, build, and scale workflow editors and diagram-based UIs without reinventing core diagramming logic.

In this hands-on workshop, Łukasz Jaźwa CTO at Workflow Builder (with 12+ years of experience in diagramming) shows how to go from raw React Flow to a production-ready workflow editor using Workflow Builder SDK, JSON Forms, and Overflow UI.

You’ll see real code, real patterns, and real trade-offs.

Ideal for frontend developers, React engineers, and product teams building:
• Workflow editors
• Automation builders
• Low-code / no-code tools
• Diagram-heavy applications

What you’ll get from this workshop:
• How diagram-based UIs actually work (nodes, edges, ports, layout)
• React Flow internals: nodes, edges, handles, state & hooks
• When React Flow is enough — and when it isn’t
• How Workflow Builder accelerates workflow editor development
• Adding custom nodes, schemas, and side panels
• Auto-layout with Dagre & ELK
• Custom form logic with JSON Forms
• Building custom controls (beyond inputs & selects)
• Styling & rebranding workflow UIs with CSS variables
• Using Overflow UI to ship better-looking nodes faster
• Open Source vs Enterprise capabilities

00:00 – Workflow editor development with React Flow
04:09 – Diagram UI basics: Nodes, edges, ports explained
13:16 – Diagram rendering engines: WebGL vs canvas vs SVG vs DOM
20:44 – React Flow tutorial: Core concepts and architecture
29:37 – Custom nodes and edges in React Flow
33:31 – Auto layout in React Flow with Dagre
38:42 – Why use Workflow Builder SDK instead of raw React Flow
41:22 – Workflow Builder open source features overview
44:32 – Workflow builder enterprise features explained
49:34 – Exporting workflow diagrams to PDF
59:53 – Defining workflow node data schemas
01:04:07 – Dynamic forms with JSON schema and UI schema
01:07:03 – Creating custom workflow nodes step by step
01:13:14 – Form validation and conditional logic in workflow editors
01:20:56 – Building fully custom React Flow nodes (AI agent example)
01:28:11 – Rendering custom nodes in React Flow
01:32:27 – Drag and drop node preview in Workflow Builder
01:38:59 – Creating custom form controls with JSON forms
01:45:40 – Dynamic attributes and editable lists in nodes
01:53:53 – Overflow UI library for workflow editors
01:56:40 – Styling React Flow nodes with Overflow UI
02:04:43 – Collapsible nodes and advanced workflow UI patterns
02:13:03 – Theming and rebranding workflow editors with CSS variables
02:17:00 – Workflow Builder SDK summary and key takeaways

This talk was presented as part of the React Summit NYC agenda on November 27, 2025.

Website: workflowbuilder.io
Github: https://github.com/synergycodes/workf...
Discord:   / discord