Skip to Content

React Flow

Learn Reference Examples UI ShowcasePro Remove Attribution

Learn
Reference
Examples
UI
Showcase

- Introduction
- - AI Workflow Editor
  - Workflow Editor
- - Node Utilities
  - Base Node
  - Status Indicator
  - Appendix
  - Tooltip
  - Custom Nodes
  - Database Schema
  - Placeholder
  - Labeled Group
  - Handles
  - Base Handle
  - Labeled Handle
  - Button Handle
  - Custom Edges
  - Edge with Button
  - Edge with Node Data
  - Animated SVG Edge
  - Controls
  - Node Search
  - Zoom Slider
  - Zoom Select
  - Misc
  - DevTools
- Request a Component
Showcase
Pro
Remove Attribution

All Examples
Pro Examples
Feature Overview
- Download Image
- Server Side Image Creation

Pro Examples

Pro Examples

Here you can find all the advanced React Flow Pro examples to use in your node-based UIs, crafted by the React Flow core team.

Last updated on October 1, 2026

Feature Overview

A project by the xyflow team

We are building and maintaining open source software for node-based UIs since 2019.

Docs

Getting Started API Reference Examples UI Showcase Playground

Social

Discord Github X / Twitter Bluesky

xyflow

Blog Open Source About Contact Careers

Legal

MIT License Code of Conduct Imprint

info@xyflow.com — Copyright © 2026 webkid GmbH. All rights reserved — website design by Facu Montanaro

Nodes

Node Position Animation screenshot

Node Position Animation screenshot

NODES

Node Position Animation

Animate smooth transitions between different graph layouts with interactive controls

Shapes screenshot

Shapes screenshot

NODES

Shapes

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

See example

Edges

Edge Routing screenshot

Edge Routing screenshot

EDGES

Implement a routable edge with libavoid

Editable Edge screenshot

Editable Edge screenshot

EDGES

Interaction

Helper Lines screenshot

Helper Lines screenshot

INTERACTION

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

Collaborative screenshot

Collaborative screenshot

Subflows & Grouping

Selection Grouping screenshot

Selection Grouping screenshot

SUBFLOWS & GROUPING

Selection Grouping

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

Parent Child Relation screenshot

Parent Child Relation screenshot

Layout

Expand and Collapse screenshot

Expand and Collapse screenshot

LAYOUT

Expand and Collapse

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

Auto Layout screenshot

Auto Layout screenshot

Whiteboard

Freehand Draw screenshot

Freehand Draw screenshot

WHITEBOARD

Freehand drawing on the canvas.

Misc

Server Side Image Creation screenshot

Server Side Image Creation screenshot

MISC

Server Side Image Creation

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

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

See example

INTERACTION

Collaborative

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

See example

Copy and Paste screenshot

Copy and Paste screenshot

INTERACTION

Select nodes and edges to cut, copy, and paste

Undo and Redo screenshot

Undo and Redo screenshot

INTERACTION

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

SUBFLOWS & GROUPING

Parent Child Relation

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

See example

LAYOUT

Auto Layout

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

See example

Force Layout screenshot

Force Layout screenshot

LAYOUT

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

Dynamic Layouting screenshot

Dynamic Layouting screenshot

LAYOUT

Dynamic Layouting

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

Pro Examples - React Flow