🔥 React Flow 12 is here! SSR, dark mode, computing flows, and more

React Flow

LearnLearnExamplesExamplesReferenceReference
GitHub (opens in a new tab)React Flow Pro
  • Examples
  • Feature Overview
    • Custom Nodes
    • Updating Nodes
    • Stress Test
    • Hidden
    • Drag Handle
    • Easy Connect
    • Add Node On Edge Drop
    • Proximity Connect
    • Node Resizer
    • Node Toolbar
    • Resize and Rotate
    • Dynamic Grouping
    • Intersections
    • Shapes
    • Connection Limit
    • Delete Middle Node
    • Custom Edges
    • Animating Edges
    • Edge Types
    • Editable Edge
    • Reconnect Edge
    • Connection Line
    • Multi Connection Line
    • Edge Markers
    • Delete Edge on Drop
    • Floating Edges
    • Simple Floating Edges
    • Edge Label Renderer
    • Temporary Edges
    • Sub Flow
    • Horizontal Flow
    • Dagre Tree
    • Entitree Flex Tree
    • Elkjs Tree
    • Elkjs Multiple Handles
    • Auto Layout
    • Force Layout
    • Expand and Collapse
    • Workflow Builder
    • Interaction Props
    • Drag and Drop
    • Computing Flows
    • Validation
    • Connection Events
    • Preventing Cycles
    • Undo and Redo
    • Copy and Paste
    • Helper Lines
    • Touch Device
    • Save and Restore
    • Collision Detection
    • Zoom Transitions
    • Collaborative
    • Contextual Zoom
    • Context Menu
    • Styled Components
    • Tailwind
    • Turbo Flow
    • Base Style
    • Dark Mode
    • Static Server Side Generation
    • Download Image
    • ReactFlowProvider
    • useReactFlow
Examples
Interaction
Save and Restore

Save and Restore

If you want to save and restore a flow you can use the toObject function of the React Flow instance or your local nodes and edges state. In this example you can move nodes around, add ones and save the diagram. Then reload the page and click restore to restore your diagram.

Touch DeviceCollision Detection

A project by the xyflow team

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

React Flow

Quickstart GuideAPI ReferenceExamplesShowcaseCase StudiesReact Flow Pro

Community

DiscordGithubMastodonBluesky

xyflow

BlogOpen SourceAboutContact

Legal

MIT LicenseCode of ConductImprint

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