How it works
You give React Flow a list of nodes (with positions) and edges (which node links to which), and it renders an interactive canvas with dragging, zooming, panning, selection, a minimap and controls. Each node is an ordinary React component, so it can hold forms, charts or buttons, and handles mark where connections may start and end. It is made by xyflow, which also publishes Svelte Flow.
Common uses are automation and workflow builders, AI agent editors, data pipelines, mind maps and org charts. It does not arrange nodes by itself; layout libraries such as dagre or ELK calculate positions. Very large graphs with rich nodes need care (simple node components, memoisation) to stay smooth.
React Flow pricing
Open source
Free (MIT). An optional React Flow Pro subscription adds advanced examples, prioritised issues and direct support from the maintainers.
React Flow pricing page (opens in a new tab)Approximate, checked September 2026.What the other tools cost
Related terms
More in Building blocks and outside APIs
Interface pieces