React Flow
Open source React and Svelte libraries for building node-based, diagram-style user interfaces.xyflow/xyflow
- Stars
- 38.9k
- Forks
- 2.6k
- Licence
- MIT
- Language
- TypeScript
- Last update
- 4 days ago
- Type
- Library
What it is
xyflow is the team behind two open source libraries, React Flow and Svelte Flow, for building interactive node-based interfaces such as flowcharts, graphs and visual workflow editors inside a web app. You place nodes on a canvas, connect them with edges, and the library handles rendering and interaction. The README describes them as ready to use out of the box and customizable.
- Build a visual editor where users drag and connect nodes
- Create an interactive graph viewer with a minimap and zoom controls
- Make a workflow builder with custom node types
- Add a background grid and controls to a node canvas
Great for
- Frontend developers building a flowchart or diagram editor in React
- Teams building a visual workflow or node-graph tool in Svelte
- Developers who want a maintained library instead of building canvas interactions from scratch
- Projects that need MIT-licensed code they can use commercially
Not ideal for
- People who want a finished diagram app without writing code; this is a developer library
- Projects not using React or Svelte, since the README only covers these two frameworks
- Simple static diagrams that a tool like Mermaid or a drawing app could handle with no coding
How to get it
- 1
Install with a package manager
You'll need: Node.js and npm · React or Svelte project
Install React Flow
npm install @xyflow/reactInstall Svelte Flow
npm install @xyflow/svelte - 2
Run it
- Create or open a React or Svelte project
- Install the matching package with npm
- Import the main component and its stylesheet
- Pass nodes and edges arrays to the component and render it
- 3
Get the most out of it
- Use the MiniMap, Controls and Background components shown in the basic usage examples
- Use the useNodesState and useEdgesState helpers in React to manage changes
- Follow the official learn sections at reactflow.dev/learn or svelteflow.dev/learn
- Use the onConnect handler with addEdge to let users draw new connections
Downloads
Strengths
- MIT licensed, and the README says it is free for personal and commercial use with optional sponsorship
- Offers a basic usage example for both React and Svelte that is short to read
- Mono repo has packages for React Flow 12, the older React Flow 11 branch, Svelte Flow and a shared system library
Trade-offs
- Requires working knowledge of React or Svelte; the README does not cover beginner setup in depth
- Some advanced features and support are tied to the React Flow Pro offering, per the README
- The README is truncated here, so detailed API and customization limits are not covered in this entry
How it compares
| Project | Stars | Type | Level | Updated | Best for |
|---|---|---|---|---|---|
| xyflow (this) | 38.9k | Library | intermediate | 4 days ago | Frontend developers building a flowchart or diagram editor in React |
| xstate | 30.4k | Library | intermediate | 4 days ago | Frontend developers managing complex UI flows with many interacting states |
| editor.md | 14.3k | Library | beginner | 2.5 years ago | Web developers who want a Markdown input box inside their own site or admin panel |
| mermaid | 91k | Dev tool | beginner | 4 days ago | Developers who want diagrams stored as text alongside their code and docs |
| Chart.js | 67.8k | Library | intermediate | 14 days ago | Web developers adding standard charts such as line or bar charts to a site |
| algorithms | 25.6k | Library | beginner | 1 months ago | Students studying data structures and algorithms |
Stats synced from GitHub. The assessment above was drafted with AI from the project's README on 2026-10-29 and may miss recent changes — check the README before relying on a command. MIT licence: free to use, modify and distribute, including commercially, as long as you keep the copyright notice.