Context: Researching options for a constrained node-based WYSIWYG workflow UI builder for non-technical users (agent actions: CRM routing, dynamic API lookups, calendar links). Hack Start sprint planned for April 6–10.
Repo: https://github.com/xyflow/xyflow
Site: https://reactflow.dev
License: MIT (free)
npm: reactflow / @xyflow/react
- Most widely-adopted React node canvas library — largest community & ecosystem
- Fully customizable nodes and edges — any React component can be a node
- Built-in drag-and-drop, zoom/pan, undo/redo
- Virtualization + smart rendering handles hundreds of nodes efficiently
- Documented real-world use cases: workflow builders, chatbot UIs, AI agent builders
- Active maintenance and strong 2026 dev survey results
- Layout algorithm integrations (Dagre, ELK)
- MIT licensed — truly free
- More flexible than opinionated — you have to build the constraints yourself (actually fine for our use case)
- Pro plan exists for some advanced features (subflows, collaboration) — but core is solid free
- Can feel like "too much rope" for very beginner devs building node types
Strong fit. The constraint layer (limited node types, guided templates, static action list) would be built on top — React Flow just handles the canvas. Best combination of flexibility + community support.
Repo: https://github.com/reaviz/reaflow
License: Apache 2.0
npm: reaflow
- Built-in automatic layout via ELKJS — great for tree/DAG-style flows
- Clean Node/Edge/Port API — straightforward to customize
- Supports nested nodes and proximity-based linking
- Good for structured, top-down workflow layouts
- Zoom, pan, drag-and-drop all included
- Smaller community than React Flow — less documentation, fewer examples
- Less actively maintained (React Flow has it beat here)
- Fewer customization options for complex visual styles
- Layout auto-algorithm is great but may fight you if you want freeform canvas
Decent second option. If the team wants an opinionated top-down layout (like a decision tree), ELKJS auto-layout could actually be a feature. But React Flow + Dagre would likely cover this too.
Site: https://flume.dev
License: MIT
npm: flume
- Unique approach: models logic as a JSON graph with typed ports (color-coded, type-safe connections)
- Ships with both a visual editor UI AND a runtime engine — run your graphs anywhere (browser, server)
- 60fps+ performance — bypasses React renders for drag/zoom/pan
- Designed specifically for business logic as visual graphs — very aligned with agent action routing
- Graphs export as JSON — easy to store and execute
- Smaller community, less maintained (latest npm: v1.0.4)
- Known issues with Next.js v13/v14 (right-click context menu bugs)
- Less flexible for purely visual/non-executable diagrams
- Less active development than React Flow
Interesting dark horse. The typed ports and built-in execution engine are genuinely compelling for agent routing logic. Worth a look during Hack Start week as a prototype candidate — especially if the backend needs to execute the graph logic directly.
Repo: https://github.com/nocode-js/sequential-workflow-designer
License: MIT
npm: sequential-workflow-designer
- Framework-agnostic (React, Angular, Svelte, vanilla JS)
- Purpose-built for sequential/conditional workflow UIs
- No dependencies
- Highly constrained by design — perfect for non-technical users
- Built-in step types: tasks, switches, loops
- Strictly sequential — not a freeform canvas (no arbitrary node placement)
- Limited to linear/conditional flows — no complex graph topologies
- Less visual polish than React Flow
- Smaller community
Worth considering if the UX is top-down/sequential. If the open question of "horizontal swimlanes vs vertical tree" resolves to a linear flow, this could be the most user-friendly option for non-technical users.
| Library | Flexibility | Community | Auto-Layout | Execution Engine | Best For |
|---|---|---|---|---|---|
| React Flow | ★★★★★ | ★★★★★ | Via plugins | ❌ | General canvas builder |
| Reaflow | ★★★☆☆ | ★★★☆☆ | ★★★★★ (ELK) | ❌ | Tree/DAG workflows |
| Flume | ★★★☆☆ | ★★☆☆☆ | ❌ | ✅ Built-in | Logic graph + execution |
| Seq. Workflow Designer | ★★☆☆☆ | ★★★☆☆ | ✅ Sequential | ❌ | Linear flows, non-tech users |
Start with React Flow. It's the safest bet — largest community, most examples for exactly this use case (workflow builders, AI agent UIs), and MIT licensed. The constraint layer (static node types, guided templates) is something you build on top, not something the library needs to provide.
Prototype with Flume if the team wants to explore a typed-port execution model where the graph logic itself runs on the backend — that's a genuinely different and interesting architecture.