NODES

A new node appears wherever you drop the connection line

NODES

Use the `isConnectable` prop to limit the number of connections a handle can have

NODES

Display any content inside of a node

NODES

Remove a node without breaking the flow

NODES

Restrict dragging to a specific part of node

NODES

Make the whole node into a handle

NODES

Detect when a node overlaps with another node

NODES

Change the size of a node with a bounding box or draggable icon

NODES

A toolbar with buttons appears next to the selected node

NODES

Automatically create edges when nodes get close to each other

NODES

A custom node that can be rotated using CSS transforms

NODES

Animate smooth transitions between different graph layouts with interactive controls

NODES

Render hundreds of nodes and edges at once

NODES

Update the data field of a specific node

NODES

Render Custom Nodes with different shapes that are commonly used in flow charts

EDGES

Create edge animations that go beyond the built-in animated edge.

EDGES

Change the appearance and behavior of the connection line

EDGES

Create edges with special routing or controls along the edge

EDGES

Delete an edge when it doesn't find a handle

EDGES

Render edge labels as divs on top of edges

EDGES

Detect edge intersections with nodes while dragging.

EDGES

You can use the EdgeToolbar component to display content on top of an edge.

EDGES

Make edges straight, stepped, smooth-stepped, or bezier curved

EDGES

Implement a routable edge with libavoid

EDGES

Instead of having the handle at a fixed point, let it move with the connected edge

EDGES

Make your edges into arrows, add custom icons, or SVGs

EDGES

Draw multiple connection lines at once from any selected nodes.

EDGES

Click-drag to move an existing edge from one handle to another

EDGES

Edges connect to the closest available handle

EDGES

Push what React Flow edges are capable of by rendering invisible ghost nodes.

EDGES

Implement a custom edge with draggable control points to change the path of an edge

INTERACTION

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

INTERACTION

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.

INTERACTION

Right-click a node to display custom actions

INTERACTION

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

INTERACTION

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

INTERACTION

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

INTERACTION

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

INTERACTION

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

INTERACTION

Check if a new connection is valid and should be added

INTERACTION

Display lines that help to visually align nodes, with automatic snapping for precise positioning and layout control.

INTERACTION

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

INTERACTION

Select nodes and edges to cut, copy, and paste

INTERACTION

Undo and redo functionality for moving, adding, and deleting nodes and edges

SUBFLOWS & GROUPING

This example demonstrates how to create dynamic node grouping in React Flow.

SUBFLOWS & GROUPING

Dynamically attach and detach nodes from parent containers with drag and drop functionality

SUBFLOWS & GROUPING

Render nested graphs and group nodes, and configure the behavior of child nodes

LAYOUT

Integrate dagre js with React Flow to create simple tree layouts

LAYOUT

For a more powerful alternative to dagre, you can also use elkjs to layout your graphs

LAYOUT

Use multiple handles with the elkjs layouting engine to reduce edge crossings

LAYOUT

A diagram that flows from left to right

LAYOUT

Create hierarchical trees with expandable and collapsible nodes using dagre for automatic layouts

LAYOUT

Automatically arrange nodes using various layout engines like dagre, d3-hierarchy, or elkjs

LAYOUT

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

LAYOUT

A self-organizing graph where users add nodes by clicking placeholder elements, and nodes position automatically.

LAYOUT

Automatically resolve node overlaps using collision detection algorithms

STYLING

Show the bare-bones base style that is built into React Flow, but is not used by default

STYLING

React Flow comes with a color mode prop that allows you to switch between dark, light and system mode.

STYLING

Use Tailwind CDN to easily make nice looking flows

STYLING

Nodes with glowing animated gradient borders, inspired by the turbo.build website

WHITEBOARD

A tool that let's you delete nodes and edges by wiping

WHITEBOARD

An example about selecting multiple items using a lasso selection tool.

WHITEBOARD

An example about drawing rectangles on a whiteboard using React Flow.

WHITEBOARD

Freehand drawing on the canvas.

MISC

Save a flow as a png with the html-to-image library

MISC

Generate static images of React Flow graphs on the server with Puppeteer