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
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fnodes%2Fcustom-node%2Fpreview.jpg&w=3840&q=75)
NODES
Display any content inside of a node
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fnodes%2Fupdate-node%2Fpreview.jpg&w=3840&q=75)
NODES
Update the data field of a specific node
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fnodes%2Fstress%2Fpreview.jpg&w=3840&q=75)
NODES
Render hundreds of nodes and edges at once
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fnodes%2Fhidden%2Fpreview.jpg&w=3840&q=75)
NODES
Hide a node or edge for expandable/collapsible diagrams
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fnodes%2Fdrag-handle%2Fpreview.jpg&w=3840&q=75)
NODES
Restrict dragging to a specific part of node
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fnodes%2Feasy-connect%2Fpreview.jpg&w=3840&q=75)
NODES
Make the whole node into a handle
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fnodes%2Fadd-node-on-edge-drop%2Fpreview.jpg&w=3840&q=75)
NODES
A new node appears wherever you drop the connection line
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fnodes%2Fproximity-connect%2Fpreview.jpg&w=3840&q=75)
NODES
Automatically create edges when nodes get close to each other
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fnodes%2Fnode-resizer%2Fpreview.jpg&w=3840&q=75)
NODES
Change the size of a node with a bounding box or draggable icon
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fnodes%2Fnode-toolbar%2Fpreview.jpg&w=3840&q=75)
NODES
A toolbar with buttons appears next to the selected node
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fnodes%2Frotatable-node%2Fpreview.jpg&w=3840&q=75)
NODES
A custom node that can be rotated using CSS transforms
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fpro-examples.reactflow.dev%2Fdynamic-grouping%2Fthumbnail.jpg&w=3840&q=75)
NODES
Group nodes together by dragging them into the same container
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fnodes%2Fintersections%2Fpreview.jpg&w=3840&q=75)
NODES
Detect when a node overlaps with another node
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fpro-examples.reactflow.dev%2Fshapes%2Fthumbnail.jpg&w=3840&q=75)
NODES
Custom node that can render different shapes like a circle, diamond or hexagon that are commonly used in flow charts
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fnodes%2Fconnection-limit%2Fpreview.jpg&w=3840&q=75)
NODES
Use the `isConnectable` prop to limit the number of connections a handle can have
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fnodes%2Fdelete-middle-node%2Fpreview.jpg&w=3840&q=75)
NODES
Remove a node without breaking the flow
Edges
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fedges%2Fcustom-edges%2Fpreview.jpg&w=3840&q=75)
EDGES
Create edges with special routing or controls along the edge
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fedges%2Fanimating-edges-svg%2Fpreview.jpg&w=3840&q=75)
EDGES
Create edge animations that go beyond the built in animated edge.
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fedges%2Fedge-types%2Fpreview.jpg&w=3840&q=75)
EDGES
Make edges straight, stepped, smooth-stepped, or bezier curved
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fpro-examples.reactflow.dev%2Feditable-edge%2Fthumbnail.jpg&w=3840&q=75)
EDGES
Implement a custom edge with draggable control points to change the path of an edge
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fedges%2Freconnect-edge%2Fpreview.jpg&w=3840&q=75)
EDGES
Click-drag to move an existing edge from one handle to another
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fedges%2Fcustom-connectionline%2Fpreview.jpg&w=3840&q=75)
EDGES
Change the appearance and behavior of the connection line
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fedges%2Fmulti-connection-line%2Fpreview.jpg&w=3840&q=75)
EDGES
Draw multiple connection lines at once from any selected nodes.
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fedges%2Fmarkers%2Fpreview.jpg&w=3840&q=75)
EDGES
Make your edges into arrows, add custom icons, or SVGs
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fedges%2Fdelete-edge-on-drop%2Fpreview.jpg&w=3840&q=75)
EDGES
Delete an edge when it doesn't find a handle
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fedges%2Ffloating-edges%2Fpreview.jpg&w=3840&q=75)
EDGES
Instead of having the handle at a fixed point, let it move with the connected edge
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fedges%2Fsimple-floating-edges%2Fpreview.jpg&w=3840&q=75)
EDGES
Edges connect to the closest available handle
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fedges%2Fedge-label-renderer%2Fpreview.jpg&w=3840&q=75)
EDGES
Render edge labels as divs on top of edges
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fedges%2Ftemporary-edges%2Fpreview.jpg&w=3840&q=75)
EDGES
Push what React Flow edges are capable of by rendering invisible ghost nodes.
Layout
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Flayout%2Fsub-flows%2Fpreview.jpg&w=3840&q=75)
LAYOUT
Render nested graphs and group nodes, and configure the behavior of child nodes
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Flayout%2Fhorizontal%2Fpreview.jpg&w=3840&q=75)
LAYOUT
A diagram that flows from left to right
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Flayout%2Fdagre%2Fpreview.jpg&w=3840&q=75)
LAYOUT
Integrate dagre js with React Flow to create simple tree layouts
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Flayout%2Fentitree-flex%2Fpreview.jpg&w=3840&q=75)
LAYOUT
Create tree layouts that have sibling nodes and support nodes with different dimensions for family tree type layouts
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Flayout%2Felkjs%2Fpreview.jpg&w=3840&q=75)
LAYOUT
For a more powerful alternative to dagre, you can also use elkjs to layout your graphs
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Flayout%2Felkjs-multiple-handles%2Fpreview.jpg&w=3840&q=75)
LAYOUT
Use multiple handles with the elkjs layouting engine to reduce edge crossings
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fpro-examples.reactflow.dev%2Fauto-layout%2Fthumbnail.jpg&w=3840&q=75)
LAYOUT
Automatically arrange nodes after adding items from a sidebar.
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fpro-examples.reactflow.dev%2Fforce-layout%2Fthumbnail.jpg&w=3840&q=75)
LAYOUT
Newly added nodes never overlap with existing nodes using d3-force
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fpro-examples.reactflow.dev%2Fexpand-collapse%2Fthumbnail.jpg&w=3840&q=75)
LAYOUT
Click on parent nodes to toggle the visibility of their children
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fpro-examples.reactflow.dev%2Fworkflow-builder%2Fthumbnail.jpg&w=3840&q=75)
LAYOUT
Add and auto-layout new nodes in a vertical tree flow
Interaction
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Finteraction%2Finteraction-props%2Fpreview.jpg&w=3840&q=75)
INTERACTION
The most popular props used for interactivity of a diagram
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Finteraction%2Fdrag-and-drop%2Fpreview.jpg&w=3840&q=75)
INTERACTION
Drag and drop outside of the React Flow pane with native HTML Drag and Drop API or react-draggable.
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Finteraction%2Fcomputing-flows%2Fpreview.jpg&w=3840&q=75)
INTERACTION
This examples demonstrates how to use the helpers to handle data flow
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Finteraction%2Fvalidation%2Fpreview.jpg&w=3840&q=75)
INTERACTION
Check if a new connection is valid and should be added
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Finteraction%2Fconnection-events%2Fpreview.jpg&w=3840&q=75)
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.
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Finteraction%2Fprevent-cycles%2Fpreview.jpg&w=3840&q=75)
INTERACTION
Check if a new connection would cause a cycle in the graph
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fpro-examples.reactflow.dev%2Fundo-redo%2Fthumbnail.jpg&w=3840&q=75)
INTERACTION
Implement an undo and redo functionality for moving, adding, and deleting nodes and edges
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fpro-examples.reactflow.dev%2Fcopy-paste%2Fthumbnail.jpg&w=3840&q=75)
INTERACTION
Select nodes and edges to cut, copy, and paste
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fpro-examples.reactflow.dev%2Fhelper-lines%2Fthumbnail.jpg&w=3840&q=75)
INTERACTION
Display lines that help to visually align nodes, and enable nodes to be snapped into place when dropped
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Finteraction%2Ftouch-device%2Fpreview.jpg&w=3840&q=75)
INTERACTION
Tap two handles to connect them, and make handles bigger for smaller devices
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Finteraction%2Fsave-and-restore%2Fpreview.jpg&w=3840&q=75)
INTERACTION
Save the state of the diagram, and reload it after refreshing the page
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Finteraction%2Fzoom-transitions%2Fpreview.jpg&w=3840&q=75)
INTERACTION
Change the animation speed when the viewport is zoomed or moved
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fpro-examples.reactflow.dev%2Fcollaborative%2Fthumbnail.jpg&w=3840&q=75)
INTERACTION
Build a collaborative graph for multiple users with React Flow and yjs
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Finteraction%2Fcontextual-zoom%2Fpreview.jpg&w=3840&q=75)
INTERACTION
Only display the content of a node when you are zoomed in close enough
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Finteraction%2Fcontext-menu%2Fpreview.jpg&w=3840&q=75)
INTERACTION
Right-click a node to display custom actions
Styling
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fstyling%2Fstyled-components%2Fpreview.jpg&w=3840&q=75)
STYLING
Change the color of the background and nodes with the Styled Components library
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fstyling%2Ftailwind%2Fpreview.jpg&w=3840&q=75)
STYLING
Use Tailwind CDN to easily make nice looking flows
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fstyling%2Fturbo-flow%2Fpreview.jpg&w=3840&q=75)
STYLING
Nodes with glowing animated gradient borders, inspired by the turbo.build website
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fstyling%2Fbase-style%2Fpreview.jpg&w=3840&q=75)
STYLING
Show the bare-bones base style that is built into React Flow, but is not used by default
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fstyling%2Fdark-mode%2Fpreview.jpg&w=3840&q=75)
STYLING
React Flow comes with a color mode prop that allows you to switch between dark, light and system mode.
Misc
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fpro-examples.reactflow.dev%2Fstatic-server-side-generation%2Fthumbnail.jpg&w=3840&q=75)
MISC
A full-stack app that demonstrates how to use React Flow to statically generate a flow on the server.
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fmisc%2Fdownload-image%2Fpreview.jpg&w=3840&q=75)
MISC
Save a flow as a png with the html-to-image library
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fmisc%2Fprovider%2Fpreview.jpg&w=3840&q=75)
MISC
For working with multiple flows on a page, so that each has a separate store instance
![[object Object] screenshot](/_next/image?url=https%3A%2F%2Fexample-apps.xyflow.com%2Freact%2Fexamples%2Fmisc%2Fuse-react-flow-hook%2Fpreview.jpg&w=3840&q=75)
MISC
A hook with useful helpers for your nodes, edges, and the viewport