xyflow pro examples directory

Hello stranger! You've found your way over to the little app we have hosting all of our pro examples here at xyflow. If you're not one of the xyflow team, you're probably looking for one of our documentation sites:

reactflow.dev svelteflow.dev
auto-layout
Auto Layout
Automatic layouting for nodes after adding new items.
hidden
auto-layout-11
Auto Layout
Automatically arrange your nodes after adding items to your flow.
hidden
auto-layout-d3
Auto Layout
Automatically arrange your nodes after adding items from the sidebar.
collaborative
Collaborative
Real-time collaboration for multiple users based on yjs.
hidden
collaborative-11
Collaborative
A collaborative flow for multiple users based on yjs.
copy-paste
Copy and Paste
Copy and paste functionality for selected of nodes.
hidden
copy-paste-11
Copy and Paste
Copy and paste a selection of nodes in a flow.
hidden
dynamic-grouping
Dynamic Grouping
Group nodes together by dragging them into the same container.
hidden
dynamic-grouping-11
Dynamic Grouping
Group nodes together by dragging them into the same container.
dynamic-layouting
Dynamic Layouting
Dynamic node layout in a vertical tree flow.
hidden
dynamic-layouting-11
Dynamic Layouting
Add and auto-layout new nodes in a vertical tree flow.
hidden
dynamic-layouting-dagre
Dynamic Layouting
Add and auto-layout new nodes in a vertical tree flow.
editable-edge
Editable Edge
Custom edges with draggable control points.
hidden
editable-edge-11
Editable Edge
Drag control points to change an edge path.
expand-collapse
Expand and Collapse
Hierarchical flow with collapsible node trees.
hidden
expand-collapse-11
Expand and Collapse
Click on parent nodes to toggle the visibility of their children.
hidden
expand-collapse-d3
Expand and Collapse
Hierarchical flow with collapsible node trees.
hidden
expand-collapse-d3-11
Expand and Collapse
Click on parent nodes to toggle the visibility of their children.
hidden
expand-collapse-deprecated
Expand and Collapse (deprecated)
Click on parent nodes to toggle the visibility of their children.
force-layout
Force Layout
Force based node positioning that prevents overlapping.
hidden
force-layout-11
Force Layout
Newly added nodes never overlap with existing nodes using d3-force.
hidden
force-layout-deprecated
Force Layout (deprecated)
Newly added nodes never overlap with existing nodes using d3-force.
helper-lines
Helper Lines
Visual guides and snapping for nodes while dragging.
hidden
helper-lines-11
Helper Lines
Snap nodes along the same axis with helper lines.
node-position-animation
Node Position Animation
Animation helper for node positions.
parent-child-relation
Parent Child Relation
Group nodes by dragging them into a container.
remove-attribution
Remove Attribution
How to remove the attribution label from the React Flow pane.
hidden
resize-rotate
Resize and Rotate (deprecated)
Resize and Rotate a custom node.
selection-grouping
Selection Grouping
Group nodes together by drawing a selection box.
server-side-image-creation
Server Side Image Creation
A tiny app that shows how to generate images.
shapes
Shapes
Custom nodes in various shapes commonly used in flowcharts.
hidden
shapes-11
Shapes
Custom nodes in various shapes commonly used in flowcharts.
undo-redo
Undo and Redo
Undo and redo for add, delete, connect, and position nodes and edges.
hidden
undo-redo-11
Undo and Redo
Undo and redo for adding, deleting, connecting, and positioning nodes and edges.
workflow-editor
Workflow Editor
A Next.js-based application designed to help you quickly create, manage, and visualize workflows.