NODES

Display any content inside of a node

NODES

Update the data field of a specific node

NODES

Render hundreds of nodes and edges at once

NODES

Restrict dragging to a specific part of node

NODES

A new node appears wherever you drop the connection line

NODES

Automatically create edges when nodes get close to each other

NODES

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

NODES

Make the whole node into a handle

NODES

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

NODES

Detect when a node overlaps with another nodes

EDGES

Create edges with special routing or controls along the edge

EDGES

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

EDGES

Render edge labels as divs on top of edges

EDGES

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

EDGES

Change the appearance and behavior of the connection line

EDGES

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

LAYOUT

Integrate dagre js with Svelte Flow to create simple tree layouts

LAYOUT

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

LAYOUT

A diagram that flows from left to right

LAYOUT

Integrate dagre js with Svelte Flow to create simple tree layouts

INTERACTION

How to use the useNodesData helpers to handle data flow

INTERACTION

Right-click a node to display custom actions

INTERACTION

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

INTERACTION

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

INTERACTION

Check if a new connection is valid and should be added

STYLING

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

STYLING

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

STYLING

Use Tailwind to easily make nice looking flows

STYLING

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

MISC

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

MISC

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

MISC

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