Wire Your Ideas with Svelte Flow

A customizable Svelte component for building node-based editors and interactive diagrams by the creators of React Flow


Current Version


Weekly Installs



Svelte Flow is a MIT-licensed open source library. You can help us to ensure the further development and maintenance by supporting us.

Support Us

Getting Started with Svelte Flow

Make sure you’ve installed npm, pnpm or yarn. Then you can install Svelte Flow via:

npm install @xyflow/svelte

Ready out-of-the-box

The things you need are already there: dragging nodes, zooming, panning, selecting multiple nodes, and adding/removing edges are all built-in.

Get started

Powered by us.
Designed by you.

We play nice with Tailwind and good old CSS. Svelte Flow nodes are just Svelte components. Create custom nodes to have full control with interactive components.

Custom nodes guide

All the right plugins

Make more advanced apps with the Background, Minimap, Controls, and Panel components.

Read more
React Flow mini map

Interactive Examples

See Svelte Flow in action

To see all the capabilities of Svelte Flow, check out the interactive examples which are regularly updated.

See all examples

A project by the xyflow team

We are Christopher, Hayleigh, John, Peter and Moritz. We are the maintainers of React Flow, Svelte Flow, and the communities around them