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

Display any content inside of a node

See example
[object Object] screenshot

NODES

Updating Nodes

Update the data field of a specific node

See example
[object Object] screenshot

NODES

Stress Test

Render hundreds of nodes and edges at once

See example
[object Object] screenshot

NODES

Drag Handle

Restrict dragging to a specific part of node

See example
[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

Proximity Connect

Automatically create edges when nodes get close to each other

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

Easy Connect

Make the whole node into a handle

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

Intersections

Detect when a node overlaps with another nodes

See example

Edges

[object Object] screenshot

EDGES

Custom Edges

Create edges with special routing or controls along the edge

See example
[object Object] screenshot

EDGES

Edge Types

Make edges straight, stepped, smooth-stepped, or bezier curved

See example
[object Object] screenshot

EDGES

Edge Labels

Render edge labels as divs on top of edges

See example
[object Object] screenshot

EDGES

Edge Markers

Make your edges into arrows, add custom icons, or SVGs

See example
[object Object] screenshot

EDGES

Connection Line

Change the appearance and behavior of the connection line

See example
[object Object] screenshot

EDGES

Floating Edges

This example shows how to implement an edge type that dynamically connects to the closest handle.

See example

Layout

[object Object] screenshot

LAYOUT

Dagre Tree

Integrate dagre js with Svelte Flow to create simple tree layouts

See example
[object Object] screenshot

LAYOUT

Elkjs Tree

For a more powerful alternative to dagre, you can also use elkjs to layout your graphs

See example
[object Object] screenshot

LAYOUT

Horizontal Flow

A diagram that flows from left to right

See example
[object Object] screenshot

LAYOUT

Subflows

Integrate dagre js with Svelte Flow to create simple tree layouts

See example

Interaction

[object Object] screenshot

INTERACTION

Computing Flows

How to use the useNodesData helpers to handle data flow

See example
[object Object] screenshot

INTERACTION

Context Menu

Right-click a node to display custom actions

See example
[object Object] screenshot

INTERACTION

Contextual Zoom

Only display the content of a node when you are zoomed in close enough

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

See example
[object Object] screenshot

INTERACTION

Validation

Check if a new connection is valid and should be added

See example

Styling

[object Object] screenshot

STYLING

Base Style

Show the bare-bones base style that is built into Svelte Flow, but is not used by default

See example
[object Object] screenshot

STYLING

Dark Mode

Svelte Flow comes with a color mode prop that allows you to switch between dark, light and system mode.

See example
[object Object] screenshot

STYLING

Tailwind

Use Tailwind to easily make nice looking flows

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

Save a flow as a png with the html-to-image library

See example
[object Object] screenshot

MISC

Threlte Flow

Use Svelte Flow + Threlte to create a flow that controls a 3D scene.

See example
[object Object] screenshot

MISC

useSvelteFlow

A hook with useful helpers for your nodes, edges, and the viewport

See example
Last updated on
Feature Overview