Building blocks and outside APIs · Library

React Flow

A React library for node-based interfaces: diagrams, flowcharts, workflow builders and pipelines where users drag boxes around and connect them with lines.

Interface pieces · Open source · updated

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

More in Building blocks and outside APIs

Interface pieces

All 14 Building blocks and outside APIs terms

Crafted in the dark. Shipped to the world.

Tell us what you are building. You get a private project space with a proposal and a line-by-line quote within a day.