Łukasz Jaźwa

Łukasz Jaźwa

Łukasz Jaźwa, CTO at Workflow Builder. Passionate about diagramming and algorithm design, with a strong focus on graph theory. Loves escaping to the mountains for a good trek after hours.
Building AI workflow editor UI in React with Workflow Builder SDK
React Summit US 2025React Summit US 2025
Nov 27, 15:00
Building AI workflow editor UI in React with Workflow Builder SDK
WorkshopPublic
Join us to learn how to build your own Zapier-like interface in days, not months. Discover how to save 1,000+ hours of design and coding upfront, building a complex workflow editor UI from scratch. Customize it for AI orchestration, automations, business processes visualization and other real-world workflow needs. Workflow Builder SDK is designed to quickly deploy node flow interfaces that let you tailor properties, layouts, and interactions to suit unique business workflows. Connect it with any backend and reduce the dependency on N8N, Make or Zapier for your own automation needs.Agenda and key takeaways:Explore diagramming tools: Understand and compare libraries for building diagram UIs in React. We analyze the strengths, trade-offs, and best use cases (Web/Canvas/SVG/DOM).Hands-on: Workflow Builder SDK: Build a real-world AI workflow editor interface using our SDK and the React Flow foundation.Plug & play architecture: Implement the core features of a modern editor:Custom nodes and edgesState management and drag-and-drop supportAuto-layout, minimap, and zoom controlsProperty-editing sidebarPolishing user experience (UX): Learn how to enhance usability and visual appeal. We'll use Overflow - Open Source UI components to streamline development and keep the focus purely on business logic.
Register
Build and Customize a Node-Based Workflow Builder With React
React Summit 2025React Summit 2025
140 min
Build and Customize a Node-Based Workflow Builder With React
WorkshopFree
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:Introduction to Diagram LibrariesBuilding a Workflow Application with React FlowImplementing Advanced Interaction and Usability FeaturesEnhancing the User ExperienceExtending and Scaling Your Node-based UIPlease note that this workshop assumes a comfortable working knowledge of React, so we can focus on building advanced features right from the start.