Svelte Flow is still alpha! Check out the latest changes here.

Svelte Flow

LearnLearnReferenceReferenceExamplesExamples
Support Us
  • Overview
    • Custom Nodes
    • Updating Nodes
    • Stress Test
    • Drag Handle
    • Add Node On Edge Drop
    • Proximity Connect
    • Connection Limit
    • Easy Connect
    • Intersections
    • Connection Line
    • Custom Edges
    • Edge Label Renderer
    • Edge Markers
    • Edge Types
    • Simple Floating Edges
    • Dagre Tree
    • Elkjs Tree
    • Horizontal Flow
    • Subflows
    • Context Menu
    • Contextual Zoom
    • Drag and Drop
    • Validation
    • Base Style
    • Dark Mode
    • Tailwind
    • Turbo Flow
    • Download Image
    • Threlte Flow
    • useSvelteFlow
Examples
Nodes
Drag Handle

Drag Handle

You can restrict dragging to a specific part of node, by specifiying a class that will act as a dragHandle.

Read-only
⚠️
To surpress unknown prop warnings in the browser console, please refer to the guide. (opens in a new tab)
Stress TestAdd Node On Edge Drop

A project by the xyflow team

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

Svelte Flow

Quickstart GuideAPI ReferenceExamplesShowcaseSupport Us

Community

DiscordGithubMastodonBluesky

xyflow

BlogOpen SourceAboutContact

Legal

MIT LicenseCode of Conduct

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