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

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

Custom Nodes

This is an example of a custom node implementation. Svelte Flow nodes are Svelte components, and you can display any content that you want.

See example
[object Object] screenshot

NODES

Updating Nodes

This example shows how to update the data field of a specific node.

See example
[object Object] screenshot

NODES

Stress Test

A stress test with a lot of nodes and edges.

See example
[object Object] screenshot

NODES

Drag Handle

See example
[object Object] screenshot

NODES

Add Node On Edge Drop

See example
[object Object] screenshot

NODES

Proximity Connect

Example showing how to automatically create edges when nodes get close to each other

See example
[object Object] screenshot

NODES

Connection Limit

This is an example of a custom node limiting the amount of connections a handle can have using the `isConnectalbe` prop.

See example
[object Object] screenshot

NODES

Easy Connect

See example
[object Object] screenshot

NODES

Intersections

See example
[object Object] screenshot

NODES

Node Resizer

See example

Edges

[object Object] screenshot

EDGES

Connection Line

See example
[object Object] screenshot

EDGES

Custom Edges

Svelte Flow has four edge types- bezier, straight, step and smoothstep. It’s also possible to create a custom edge, if you need a special edge routing or controls at the edge.

See example
[object Object] screenshot

EDGES

Edge Label Renderer

The EdgeLabelRenderer component can be used to render labels

See example
[object Object] screenshot

EDGES

Edge Markers

Example for demonstrating edge markers in Svelte Flow.

See example
[object Object] screenshot

EDGES

Edge Types

example showing different kinds of edge types in svelte flow

See example
[object Object] screenshot

EDGES

Simple Floating Edges

See example

Layout

[object Object] screenshot

LAYOUT

Dagre Tree

You can integrate dagre.js with Svelte Flow to create tree layouts. A good alternative to dagre is elkjs if you are looking for a more advanced layouting library.

See example
[object Object] screenshot

LAYOUT

Elkjs Tree

If you're looking for a more powerful alternative to dagre, you can also use elkjs to layout your Svelte Flow graphs.

See example
[object Object] screenshot

LAYOUT

Horizontal Flow

See example
[object Object] screenshot

LAYOUT

Subflows

You can create nested flows - known as subflows - with Svelte Flow. Here you can see how to implement them.

See example

Interaction

[object Object] screenshot

INTERACTION

Computing Flows

This example combines some hooks and helper functions for computing the data flow between nodes.

See example
[object Object] screenshot

INTERACTION

Context Menu

See example
[object Object] screenshot

INTERACTION

Contextual Zoom

See example
[object Object] screenshot

INTERACTION

Drag and Drop

This example shows how to implement a sidebar with a drag and drop functionality.

See example
[object Object] screenshot

INTERACTION

Validation

This example explains how to validte new connections between nodes.

See example

Styling

[object Object] screenshot

STYLING

Base Style

Svelte Flow comes with a default style and a base style. This example shows how the base style looks.

See example
[object Object] screenshot

STYLING

Dark Mode

Svelte Flow comes with a default style and a base style. This example shows how the base style looks.

See example
[object Object] screenshot

STYLING

Tailwind

In this example we demonstrate how to use tailwind for styling a flow.

See example
[object Object] screenshot

STYLING

Turbo Flow

This example showcases how you can recreate the style that is used in the turbo docs.

See example

Misc

[object Object] screenshot

MISC

Download Image

See example
[object Object] screenshot

MISC

Threlte Flow

This example shows how you can use Svelte Flow in combination with Threlte to create a flow that controls a 3D scene.

See example
[object Object] screenshot

MISC

useSvelteFlow

The useSvelteFlow hook gives you access to the Svelte Flow store and provides some functions for updating the viewport.

See example
Feature Overview