Feature-complete and crafted by the core team
Step-by-step instructions on how each example works
Subscribers are the first to get new pro examples and refactors
Download the pro examples and use them anywhere, anytime


Auto Layout
Automatically arrange your nodes after adding items to your flow.

Collaborative
A collaborative flow for multiple users based on yjs.

Copy and Paste
Copy and paste a selection of nodes in a flow.

Dynamic Grouping
Group nodes together by dragging them into the same container.

Editable Edge
Drag control points to change an edge path.

Expand and Collapse
Click on parent nodes to toggle the visibility of their children.

Force Layout
Newly added nodes never overlap with existing nodes using d3-force.

Helper Lines
Snap nodes along the same axis with helper lines.

Shapes
Custom nodes in various shapes commonly used in flowcharts.

Undo and Redo
Undo and redo for adding, deleting, connecting, and positioning nodes and edges.

Workflow Builder
Add and auto-layout new nodes in a vertical tree flow.
Get Started
Boost your apps with React Flow Pro
Get all 10 pro examples with just one month of a Pro subscription from 129€
For education purposes
Email us at info@xyflow.com using your university email address
For non-commercial open source projects
Contact us with the link to the github or gitlab repository