Skip to Content

Upgrade your apps with React Flow Prostarstarstar Examples

Get 10 advanced React Flow code examples to use in your node-based UIs, crafted by the React Flow core team.

See Plans
Sign Upto get a free pro example
By the creators of React Flow

Feature-complete and crafted by the core team

Downloadable Vite apps and guides

Step-by-step instructions on how each example works

Regularly Added and Updated

Subscribers are the first to get new pro examples and refactors

Subscribe for one, use them forever

Download the pro examples and use them anywhere, anytime


Shapes Example Preview

Helper Lines Free Trial

Have guiding lines appear when the sides of your nodes are nearly lined up to assist users in aligning and positioning nodes in a diagram. Great for precise layouting and visual consistency like in design tools such as Figma and Miro.

Demo
Sign Upto get this example for free
Auto Layout screenshot
Auto Layout

Automatically arrange your nodes after adding items to your flow.

Demo
Collaborative screenshot
Collaborative

A collaborative flow for multiple users based on yjs.

Demo
Copy and Paste screenshot
Copy and Paste

Copy and paste a selection of nodes in a flow.

Demo
Dynamic Grouping screenshot
Dynamic Grouping

Group nodes together by dragging them into the same container.

Demo
Dynamic Layouting screenshot
Dynamic Layouting

Add and auto-layout new nodes in a vertical tree flow.

Demo
Editable Edge screenshot
Editable Edge

Drag control points to change an edge path.

Demo
Expand and Collapse screenshot
Expand and Collapse

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

Demo
Force Layout screenshot
Force Layout

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

Demo
Helper Lines screenshot
Helper Lines

Snap nodes along the same axis with helper lines.

Demo
Shapes screenshot
Shapes

Custom nodes in various shapes commonly used in flowcharts.

Demo
Static Server Side Generation screenshot
Static Server Side Generation

A tiny app that shows how to use React Flow to statically generate a flow.

Demo
Undo and Redo screenshot
Undo and Redo

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

Demo

Get Started

Boost your apps with React Flow Pro

Get all 10 pro examples with just one month of a Pro subscription from 129€

Are you a student, educator, or open source developer?
Get all of these Pro examples for free

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