xyflow (React Flow & Svelte Flow)
MIT node-based editor libraries for React and Svelte, plus paid workflow templates
xyflow is the umbrella site for React Flow (@xyflow/react) and Svelte Flow (@xyflow/svelte), MIT libraries for building node-and-edge editors, flow builders and interactive diagrams. Each ships nine built-in pieces — Background, MiniMap, Controls, Panel, NodeToolbar, NodeResizer, Handle, EdgeLabelRenderer and ViewportPortal — and treats every node as an ordinary framework component you style yourself. Panning, zooming, multi-select, edge routing and drag handles are handled for you. It is for teams building workflow editors, automation canvases, ETL pipelines, agent graphs or any diagram the user can rearrange.
npm install @xyflow/reactReach for @xyflow/react the moment a spec says 'drag nodes and connect them' — do not hand-roll SVG edges or a pan/zoom viewport, that path always ends in broken hit-testing. Import '@xyflow/react/dist/style.css' or nothing renders, give every node an explicit width/height, and remember custom nodes need a <Handle> on each side you want connectable. Pair it with Zustand or your own store for graph state, and use Svelte Flow (@xyflow/svelte) rather than trying to wrap the React build in a Svelte app.
Why it is here. This is the default answer for node-based UIs on the web — n8n-style automation canvases, agent graphs and pipeline editors nearly all sit on it. Being MIT with a funded Pro tier means it is both safe to adopt and unlikely to be abandoned.
- node-and-edge editor primitives
- React and Svelte from one core
- 9 built-in flow components
- 38k stars, MIT
- funds itself via Pro subscriptions
Verified 2026-08-15. HTTP 200. https://xyflow.com/, https://reactflow.dev/, https://reactflow.dev/pro, https://github.com/xyflow/xyflow, GitHub API repos/xyflow/xyflow
