React Flow Pro Examples

Pro subscribers have access to advanced examples and guides that can be used as a starting point or inspiration for building node-based UIs.

Auto Layout

Automatically arrange nodes after adding items from a sidebar.

Collaborative

This example shows how to build a collaborative graph for multiple users with React Flow and yjs.

Copy and Paste

This example demonstrates how to copy and paste nodes and edges within a React Flow graph.

Dynamic Grouping

Group nodes together by dragging them into the same container.

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

Helper lines are lines that are displayed while a node is being dragged. They can be used to indicate where a node will be placed when it is dropped.

Shapes

Custom node that can render different shapes like a circle, diamond or hexagon that are commonly used in flow charts.

Undo and Redo

This example shows how to implement a simple undo and redo functionality for a React Flow graph.

Workflow Builder

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