We just launched Svelte Flow!

React Flow

LearnLearnReferenceReferenceExamplesExamples
React Flow Pro
  • Overview
    • Custom Nodes
    • Updating Nodes
    • Stress Test
    • Hidden
    • Drag Handle
    • Easy Connect
    • Add Node On Edge Drop
    • Proximity Connect
    • Node Resizer
    • Resize and Rotate
    • Dynamic Grouping
    • Intersections
    • Shapes
    • Connection Limit
    • Delete Middle Node
    • Custom Edges
    • Edge Types
    • Updatable Edge
    • Connection Line
    • Edge Markers
    • Delete Edge on Drop
    • Floating Edges
    • Simple Floating Edges
    • Edge Label Renderer
    • Sub Flow
    • Horizontal Flow
    • Dagre Tree
    • Elkjs Tree
    • Auto Layout
    • Force Layout
    • Expand and Collapse
    • Workflow Builder
    • Interaction Props
    • Drag and Drop
    • Validation
    • 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
    • Download Image
    • ReactFlowProvider
    • useReactFlow
Examples
Interaction
Drag and Drop

Drag and Drop

A drag and drop user interface is very common for node-based workflow editors. The drag and drop behaviour outside of the React Flow pane is not built in but can be implemented with the native HTML Drag and Drop API (opens in a new tab) (used in this example) or a third party library like react-draggable (opens in a new tab).

Interaction PropsValidation

A project by the xyflow team

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

React Flow

Quickstart GuideAPI ReferenceExamplesShowcaseReact Flow Pro

Community

DiscordGithubMastodonBluesky

xyflow

BlogOpen SourceAboutContact

Legal

MIT LicenseCode of ConductImprint

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