React Flow

React Flow is an open-source MIT-licensed React library for building node-based UIs — workflow builders, no-code editors, AI agent graphs, mind maps, and ETL pipelines. We rate it 92/100 — it is the de facto standard if you are shipping a node editor in a React app and you want every node to be a real React component.

What is React Flow?

React Flow is built and maintained by xyflow, the team behind both React Flow and Svelte Flow. The library was first published in July 2019 and has grown into one of the most-starred React diagramming libraries on GitHub, with 36,400+ stars and 2,390+ forks as of May 2026. The repo was last pushed on May 6, 2026, which is consistent with the multi-times-per-week cadence the team has kept up since v11.

The reason teams reach for React Flow rather than Cytoscape.js, vis-network, or a Konva canvas is simple: every node is a normal React component. You drop your JSX inside a node and React Flow handles dragging, panning, zooming, edge routing, multi-select, snap-to-grid, undo points, and viewport persistence. That trade-off — DOM nodes instead of canvas rendering — costs you raw performance on huge graphs, but it buys you the entire React ecosystem inside each node: Tailwind classes, shadcn/ui components, form inputs, charts, anything you can put on a page.

Key Features of React Flow

• Custom React nodes: Each node is a React component, so you can embed inputs, charts, images, or anything else directly inside it. Nodes work cleanly with Tailwind, CSS modules, and shadcn/ui.
• Built-in interactions: Pan, zoom, multi-select, drag-to-connect, edge re-routing, snap-to-grid, copy/paste, and selection box are all wired up by default.
• Headless edges and handles: Bezier, step, smoothstep, and straight edge types out of the box, plus a primitive API for writing your own SVG edge.
• Layouting helpers: First-class examples for dagre and elkjs — essential for any flow with more than ~20 nodes that you want to auto-arrange.
• Performance escape hatches: Node virtualization renders only what is in the viewport, and the documented React.memo / useNodes selector pattern keeps re-renders predictable on graphs of a few thousand nodes.
• DevTools panel: Added in the v12 line, the official DevTools surface viewport state, node and edge stores, and event timing — a real quality-of-life upgrade once your graph gets non-trivial.

What Users Say About React Flow

On Hacker News and the GitHub discussions board, the most consistent praise is for the API design — developers repeatedly say it took them under an afternoon to build a working node editor, which is rare in this space. The xyflow Developer Survey 2023 collected feedback from real users, and even the largely positive results surfaced two recurring complaints we hear elsewhere: it can be hard to understand the inner workings when you start customizing deeply, and large graphs (5,000+ nodes) hit a wall unless you carefully memoize custom nodes. The team has been responsive — DevTools, the layouting examples, and the v12 store rewrite all came out of that survey.

React Flow Pricing

The React Flow library itself is free under the MIT license for any use, including commercial products. xyflow makes money through React Flow Pro, a paid subscription that gives you access to advanced examples and templates (drag-and-drop, computed flows, expandable nodes, copy/paste, save and restore), prioritized GitHub issues, and direct support from the xyflow team. There are three Pro tiers — Starter, Professional, and Enterprise — and pricing is shown on the Pro pricing page; Enterprise is contact-for-quote.

Plan	Cost	Best for
React Flow (OSS)	Free, MIT	Anyone — full library, no attribution required for commercial use
Pro Starter	Paid subscription	Startups shipping a commercial product on React Flow
Pro Professional	Paid subscription	Teams that want monthly support hours and an internal Discord channel
Enterprise	Custom quote	Large companies needing perpetual access and procurement support

Who Should Use React Flow?

Best for: React teams building workflow editors, AI agent graphs (LangGraph-style UIs), n8n/Zapier-style automation builders, BPMN editors, ETL pipeline visualizers, and node-based image processing tools. It is also the right pick when each node needs to be interactive — forms, charts, dropdowns, drag handles inside the node body.

Not ideal for: Teams rendering 10,000+ nodes at once where you cannot virtualize aggressively, force-directed scientific network visualizations (use Cytoscape.js or Sigma.js), or non-React stacks. If you are on Svelte, the same team ships Svelte Flow.

Pros and Cons

Pros:

• Real React components as nodes — full ecosystem access, no canvas escape hatch needed for typical UI.
• The interactions you would have written by hand (zoom, pan, select, connect) all work out of the box and feel correct.
• Documentation and example library are some of the best of any open-source React library — every concept has a runnable example.
• Permissive MIT license for the core. xyflow has been clear that this stays free.
• Active maintenance: pushed within the last week we checked, and 36k+ GitHub stars confirm community trust.

Cons:

• DOM rendering is the right default for flexibility, but you will hit performance walls earlier than with Canvas/WebGL libraries.
• Deep customization (custom edges, custom connection logic) requires reading source — the high-level API is excellent, but the internals are less documented.
• Layouting is not built in — you compose dagre or elkjs yourself, which is a small but real friction.
• The Pro subscription is essentially "advanced examples plus support" rather than runtime features, which feels expensive to some teams.

Alternatives to React Flow

Cytoscape.js — the right call for large network graphs and scientific visualizations; better raw performance, less React-native ergonomics. Reagraph — WebGL-rendered, faster on huge graphs, but rawer API surface and a smaller community. D3 + custom SVG — maximum control, maximum work; a fine pick if you have a D3 specialist on the team and a very specific visualization in mind.

Verdict: Is React Flow Worth It?

Yes, almost unconditionally, if you are building a node editor in React. The library does the boring 80% (interactions, viewport, edges) so well that you can spend your budget on the part that actually makes your product distinctive — what each node does. We rate it 92/100: the only reasons it is not higher are the DOM-rendering performance ceiling and the fact that very deep customization still requires reading the source. For 95% of node-based UIs we have shipped or reviewed in the last year, this is the first thing we would reach for.

Frequently Asked Questions

Is React Flow free?

Yes. React Flow is open source and licensed under MIT. You can use it in commercial products at no cost. React Flow Pro is a separate paid subscription for advanced examples and direct support, but it is not required.

What platforms does React Flow support?

Any React project that runs in a modern browser — desktop and mobile web. It works with Next.js, Remix, Vite, and Create React App, and there is a sister library called Svelte Flow for Svelte applications.

How does React Flow compare to Cytoscape.js?

React Flow renders nodes as React DOM components, so each node can contain any React UI. Cytoscape.js renders to canvas/WebGL and handles much larger graphs faster, but its nodes are not interactive React components. Pick React Flow for editors and apps with rich nodes, Cytoscape.js for large network analysis.

Is React Flow open source?

Yes — the source is on GitHub at xyflow/xyflow under the MIT license. The repository contains both React Flow and Svelte Flow.

Can I use React Flow without attribution?

Yes. The MIT license does not require visible attribution in your application UI. The "Built with React Flow" attribution that appears by default in the OSS version can be removed with a Pro subscription, but the license itself does not require it.