Skip to Content
✨ Svelte Flow 1.0 is here! Rewritten for Svelte 5 with many new features and improvements.

Examples

Browse our examples for practical copy-paste solutions to common use cases with React Flow. Here you can find our MIT Licensed examples, which you are free to use in your projects without restrictions, as well as our Pro examples that come with our React Flow Pro subscription plans.

Feature Overview Example Preview

Feature Overview

This is an overview example Svelte Flow's basic features. You can see built-in node and edge types, sub flows as well as NodeToolbar and NodeResizer components.

See example

Nodes

[object Object] screenshot

NODES

Add Node On Edge Drop

A new node appears wherever you drop the connection line

See example
[object Object] screenshot

NODES

Connection Limit

Use the `isConnectable` prop to limit the number of connections a handle can have

See example
[object Object] screenshot

NODES

Custom Nodes

Display any content inside of a node

See example
[object Object] screenshot

NODES

Delete Middle Node

Remove a node without breaking the flow

See example
[object Object] screenshot

NODES

Drag Handle

Restrict dragging to a specific part of node

See example
[object Object] screenshot

NODES

Easy Connect

Make the whole node into a handle

See example
[object Object] screenshot

NODES

Intersections

Detect when a node overlaps with another node

See example
[object Object] screenshot

NODES

Node Resizer

Change the size of a node with a bounding box or draggable icon

See example
[object Object] screenshot

NODES

Proximity Connect

Automatically create edges when nodes get close to each other

See example
[object Object] screenshot

NODES

Stress Test

Render hundreds of nodes and edges at once

See example
[object Object] screenshot

NODES

Updating Nodes

Update the data field of a specific node

See example

Edges

[object Object] screenshot

EDGES

Custom Connection Line

Create a custom connection line while dragging

See example
[object Object] screenshot

EDGES

Custom Edges

Create and use custom edge types

See example
[object Object] screenshot

EDGES

Edge Labels

Add and customize labels on edges

See example
[object Object] screenshot

EDGES

Edge Markers

Add markers to the start and end of edges

See example
[object Object] screenshot

EDGES

Edge Types

Use different built-in edge types

See example
[object Object] screenshot

EDGES

Floating Edges

Create edges that connect to the viewport

See example
[object Object] screenshot

EDGES

Reconnect Edge

Make edge reconnectable by using EdgeReconnectAnchor.

See example
[object Object] screenshot

EDGES

Click Connect

Create a new connection by clicking on a handle one by one. Use this functionality to programatically start a connection.

See example

Interaction

[object Object] screenshot

INTERACTION

Computing Flows

Calculate and visualize flow paths between nodes

See example
[object Object] screenshot

INTERACTION

Context Menu

Add a custom context menu to nodes and edges

See example
[object Object] screenshot

INTERACTION

Contextual Zoom

Zoom to specific nodes or areas of the flow

See example
[object Object] screenshot

INTERACTION

Drag and Drop

Drag and drop outside of the Svelte Flow pane with native HTML Drag and Drop API or svelte-draggable.

See example
[object Object] screenshot

INTERACTION

Validation

Check if a new connection is valid and should be added

See example

Layout

[object Object] screenshot

LAYOUT

Dagre Layout

Use Dagre for hierarchical graph layout

See example
[object Object] screenshot

LAYOUT

ELK.js Layout

Use ELK.js for automatic graph layout

See example
[object Object] screenshot

LAYOUT

Horizontal Flow

Create a horizontal flow layout

See example
[object Object] screenshot

LAYOUT

Subflows

Create nested flows within your graph

See example

Styling

[object Object] screenshot

STYLING

Base Style

Customize the base styling of your flow

See example
[object Object] screenshot

STYLING

Dark Mode

Implement dark mode in your flow

See example
[object Object] screenshot

STYLING

Tailwind CSS

Style your flow with Tailwind CSS

See example
[object Object] screenshot

STYLING

Turbo Flow

Nodes with glowing animated gradient borders, inspired by the turbo.build website

See example

Misc

[object Object] screenshot

MISC

Download Image

Export your flow as an image

See example
[object Object] screenshot

MISC

Threlte Flow

Use Svelte Flow with Threlte for 3D visualization

See example
[object Object] screenshot

MISC

Hello World

Get started with Svelte Flow

See example
[object Object] screenshot

MISC

useSvelteFlow

Use Svelte Flow's store and actions

See example
Last updated on
Feature Overview