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.

Feature Overview

This is an overview example React Flow's basic features. You can see built-in node and edge types, sub flows as well as NodeToolbar and NodeResizer components.

See example

Nodes

NODES

Add Node On Edge Drop

A new node appears wherever you drop the connection line

See example

NODES

Connection Limit

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

See example

NODES

Custom Nodes

Display any content inside of a node

See example

NODES

Delete Middle Node

Remove a node without breaking the flow

See example

NODES

Drag Handle

Restrict dragging to a specific part of node

See example

NODES

Easy Connect

Make the whole node into a handle

See example

NODES

Intersections

Detect when a node overlaps with another node

See example

NODES

Node Resizer

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

See example

NODES

Node Toolbar

A toolbar with buttons appears next to the selected node

See example

NODES

Proximity Connect

Automatically create edges when nodes get close to each other

See example

NODES

Rotatable Node

A custom node that can be rotated using CSS transforms

See example

NODES

Node Position AnimationPro

Animate smooth transitions between different graph layouts with interactive controls

See example

NODES

Stress Test

Render hundreds of nodes and edges at once

See example

NODES

Updating Nodes

Update the data field of a specific node

See example

NODES

ShapesPro

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

See example

Edges

EDGES

Animating Edges

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

See example

EDGES

Connection Line

Change the appearance and behavior of the connection line

See example

EDGES

Custom Edges

Create edges with special routing or controls along the edge

See example

EDGES

Delete Edge on Drop

Delete an edge when it doesn't find a handle

See example

EDGES

Edge Label Renderer

Render edge labels as divs on top of edges

See example

EDGES

Edge Intersection

Detect edge intersections with nodes while dragging.

See example

EDGES

Edge Toolbar

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

See example

EDGES

Edge Types

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

See example

EDGES

Floating Edges

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

See example

EDGES

Edge Markers

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

See example

EDGES

Multi Connection Line

Draw multiple connection lines at once from any selected nodes.

See example

EDGES

Reconnect Edge

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

See example

EDGES

Simple Floating Edges

Edges connect to the closest available handle

See example

EDGES

Temporary Edges

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

See example

EDGES

Editable EdgePro

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

See example

Interaction

INTERACTION

Computing Flows

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

See example

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

INTERACTION

Context Menu

Right-click a node to display custom actions

See example

INTERACTION

Contextual Zoom

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

See example

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

INTERACTION

Preventing Cycles

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

See example

INTERACTION

Save and Restore

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

See example

INTERACTION

Touch Device

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

See example

INTERACTION

Validation

Check if a new connection is valid and should be added

See example

INTERACTION

Helper LinesPro

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

See example

INTERACTION

CollaborativePro

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

See example

INTERACTION

Copy and PastePro

Select nodes and edges to cut, copy, and paste

See example

INTERACTION

Undo and RedoPro

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

See example

Subflows & Grouping

SUBFLOWS & GROUPING

Selection GroupingPro

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

See example

SUBFLOWS & GROUPING

Parent Child RelationPro

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

See example

SUBFLOWS & GROUPING

Sub Flow

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

See example

Layout

LAYOUT

Dagre Tree

Integrate dagre js with React Flow to create simple tree layouts

See example

LAYOUT

Elkjs Tree

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

See example

LAYOUT

Elkjs Multiple Handles

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

See example

LAYOUT

Horizontal Flow

A diagram that flows from left to right

See example

LAYOUT

Expand and CollapsePro

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

See example

LAYOUT

Auto LayoutPro

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

See example

LAYOUT

Force LayoutPro

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

See example

LAYOUT

Dynamic LayoutingPro

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

See example

LAYOUT

Node Collisions

Automatically resolve node overlaps using collision detection algorithms

See example

Styling

STYLING

Base Style

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

See example

STYLING

Dark Mode

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

See example

STYLING

Tailwind

Use Tailwind CDN to easily make nice looking flows

See example

STYLING

Turbo Flow

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

See example

Whiteboard

WHITEBOARD

Eraser Tool

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

See example

WHITEBOARD

Lasso Selection

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

See example

WHITEBOARD

Rectangle

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

See example

WHITEBOARD

Freehand DrawPro

An example of freehand drawing

See example

Misc

MISC

Download Image

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

See example

MISC

Server Side Image CreationPro

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

See example