[ Web Proxy ]

Viewing: https://reactflow.dev

[Back] [Original]

Node-Based UIs in React - React FlowSkip to Content

React Flow

Learn Reference Examples UI ShowcaseMoreReact Flow Pro Remove Attribution

SearchGitHub Discord

Learn
- Quick Start
- Core Concepts
- Customization
- Layouting
  - Overview
  - Sub Flows
- Advanced Use
- Tutorials
- Troubleshooting
- API Reference
Reference
Examples
UI
- Introduction
- Templates
  - AI Workflow Editor
  - Workflow Editor
- Components
  - Node Utilities
  - Base Node
  - Status Indicator
  - Appendix
  - Tooltip
  - Custom Nodes
  - Database Schema
  - Placeholder
  - Labeled Group
  - Handles
  - Base Handle
  - Labeled Handle
  - Button Handle
  - Custom Edges
  - Edge with Button
  - Edge with Node Data
  - Animated SVG Edge
  - Controls
  - Node Search
  - Zoom Slider
  - Zoom Select
  - Misc
  - DevTools
- Request a Component
Showcase
More
React Flow Pro
Remove Attribution

Wire your ideas with React Flow

A customizable React component for building node-based editors and interactive diagrams

Quickstart React Flow Pro

Press enter or space to select a node. You can then use the arrow keys to move the node around. Press delete to remove it and escape to cancel.

Press enter or space to select an edge. You can then press delete to remove it or escape to cancel.

38.1K

Github Stars

11.10M

Weekly Installs

MIT

License

React Flow is a MIT-licensed open source library. You can help us to ensure the further development and maintenance by subscribing to React Flow Pro.

React Flow Pro

Getting Started with React Flow

Make sure you've installed npm, pnpm or yarn. Then you can install React Flow via:

npm install @xyflow/react

See full Quickstart guide

Ready out-of-the-box

The things you need are already there: dragging nodes, zooming, panning, selecting multiple nodes, and adding/removing elements are all built-in.

Get started

Powered by us.
Designed by you.

React Flow nodes are simply React components, ready for your interactive elements. We play nice with Tailwind and plain old CSS.

Custom nodes guide

All the right components

Make more advanced apps with the Background, Minimap, Controls, Panel, NodeToolbar, and NodeResizer components.

Used By

[zapier]

[stripe]

[carto workflows] close

Project Showcase

Used by thousands of people

From solo open-source developers, to companies like Stripe and Typeform. We've seen the library used for data processing tools, chatbot builders, machine learning, musical synthesizers, and more.

Stripe Docs

Diagrams for process documentation with interactive nodes

DoubleLoop

Node-based dashboard builder to monitor business metrics

TypeForm

Interactive tool to build and visualize complex survey logic

last week
React Flow 12.11.3
xyflow team
Changelog for React Flow version 12.11.3
Check it out here
last month
React Flow 12.11.2
xyflow team
Changelog for React Flow version 12.11.2
2 months ago
React Flow 12.11.1
xyflow team
Changelog for React Flow version 12.11.1

A project by xyflow

We are xyflow, a small team of passionate developers based in Berlin. We are the maintainers of React Flow, Svelte Flow and the communities around them.

Blog About us Open Source Contact Us