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 Svelte Flow Pro subscription plans.

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

NODES

Add Node On Edge Drop

A new node appears wherever you drop the connection line

See example

NODES

Connection Limit

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

See example

NODES

Custom Nodes

Display any content inside of a node

See example

NODES

Delete Middle Node

Remove a node without breaking the flow

See example

NODES

Drag Handle

Restrict dragging to a specific part of node

See example

NODES

Easy Connect

Make the whole node into a handle

See example

NODES

Intersections

Detect when a node overlaps with another node

See example

NODES

Node Resizer

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

See example

NODES

Proximity Connect

Automatically create edges when nodes get close to each other

See example

NODES

Stress Test

Render hundreds of nodes and edges at once

See example

NODES

Updating Nodes

Update the data field of a specific node

See example

Edges

EDGES

Custom Connection Line

Create a custom connection line while dragging

See example

EDGES

Custom Edges

Create and use custom edge types

See example

EDGES

Edge Labels

Add and customize labels on edges

See example

EDGES

Edge Markers

Add markers to the start and end of edges

See example

EDGES

Edge Types

Use different built-in edge types

See example

EDGES

Floating Edges

Create edges that connect to the viewport

See example

EDGES

Reconnect Edge

Make edge reconnectable by using EdgeReconnectAnchor.

See example

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

INTERACTION

Computing Flows

Calculate and visualize flow paths between nodes

See example

INTERACTION

Context Menu

Add a custom context menu to nodes and edges

See example

INTERACTION

Contextual Zoom

Zoom to specific nodes or areas of the flow

See example

INTERACTION

Drag and Drop

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

See example

INTERACTION

Validation

Check if a new connection is valid and should be added

See example

Layout

LAYOUT

Dagre Layout

Use Dagre for hierarchical graph layout

See example

LAYOUT

ELK.js Layout

Use ELK.js for automatic graph layout

See example

LAYOUT

Horizontal Flow

Create a horizontal flow layout

See example

LAYOUT

Node Collisions

Automatically resolve node overlaps using collision detection algorithms

See example

LAYOUT

Subflows

Create nested flows within your graph

See example

Styling

STYLING

Base Style

Customize the base styling of your flow

See example

STYLING

Dark Mode

Implement dark mode in your flow

See example

STYLING

Tailwind CSS

Style your flow with Tailwind CSS

See example

STYLING

Turbo Flow

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

See example

Whiteboard

WHITEBOARD

Eraser

An eraser tool that let's you delete nodes and edges by wiping them out

See example

WHITEBOARD

Lasso Selection

Implement lasso selection for nodes using Svelte Flow

See example

WHITEBOARD

Rectangle

An example about drawing rectangles on a whiteboard using Svelte Flow.

See example

Misc

MISC

Transitions

Use Sveltes in and out transitions to animate nodes & edges

See example

MISC

Download Image

Export your flow as an image

See example

MISC

Threlte Flow

Use Svelte Flow with Threlte for 3D visualization

See example

MISC

Hello World

Get started with Svelte Flow

See example

MISC

useSvelteFlow

Use Svelte Flow's store and actions

See example