Examples

Browse our examples for practical copy-paste solutions to common use cases with React Flow. Here you can find our MIT Licensed examples, which you are free to use in your projects without restrictions, as well as our Pro examples that come with our React Flow Pro subscription plans.

Nodes

Edges

Layout

Interaction

[object Object] screenshot

INTERACTION

Interaction Props

The most popular props used for interactivity of a diagram

See example
[object Object] screenshot

INTERACTION

Drag and Drop

Drag and drop outside of the React Flow pane with native HTML Drag and Drop API or react-draggable.

See example
[object Object] screenshot

INTERACTION

Computing Flows

This examples demonstrates how to use the helpers to handle data flow

See example
[object Object] screenshot

INTERACTION

Validation

Check if a new connection is valid and should be added

See example
[object Object] screenshot

INTERACTION

Connection Events

React Flow emits different events during the connection process. Use this example to get an overview of those events and what order they are called in.

See example
[object Object] screenshot

INTERACTION

Preventing Cycles

Check if a new connection would cause a cycle in the graph

See example
[object Object] screenshot

INTERACTION

Undo and RedoPro

Implement an undo and redo functionality for moving, adding, and deleting nodes and edges

See example
[object Object] screenshot

INTERACTION

Copy and PastePro

Select nodes and edges to cut, copy, and paste

See example
[object Object] screenshot

INTERACTION

Helper LinesPro

Display lines that help to visually align nodes, and enable nodes to be snapped into place when dropped

See example
[object Object] screenshot

INTERACTION

Touch Device

Tap two handles to connect them, and make handles bigger for smaller devices

See example
[object Object] screenshot

INTERACTION

Save and Restore

Save the state of the diagram, and reload it after refreshing the page

See example
[object Object] screenshot

INTERACTION

Collision Detection

Find out if two nodes overlap each other

See example
[object Object] screenshot

INTERACTION

Zoom Transitions

Change the animation speed when the viewport is zoomed or moved

See example
[object Object] screenshot

INTERACTION

CollaborativePro

Build a collaborative graph for multiple users with React Flow and yjs

See example
[object Object] screenshot

INTERACTION

Contextual Zoom

Only display the content of a node when you are zoomed in close enough

See example
[object Object] screenshot

INTERACTION

Context Menu

Right-click a node to display custom actions

See example

Styling

Misc