Quickstart

If you want to get up and running as soon as possible, you’re in the right place! This page will take you from zero to a working Svelte Flow app in a few minutes. From there, you can take a deeper look at what Svelte Flow is all about, check out the examples, or dive into the API docs.

Dependency

Svelte Flow is published on npm as @xyflow/svelte.

npm install @xyflow/svelte

pnpm add @xyflow/svelte

yarn add @xyflow/svelte

bun add @xyflow/svelte

Play online

You can try Svelte Flow without setting anything up locally by checking out the starter projects we have on Stackblitz :

Vite template

If you want to get started right away, you can use our vite template :

npx degit xyflow/vite-svelte-flow-template app-name

pnpm dlx degit xyflow/vite-svelte-flow-template app-name

yarn dlx degit xyflow/vite-svelte-flow-template app-name

bun x degit xyflow/vite-svelte-flow-template app-name

Project Setup

To get started locally, you should have a few things:

• Node.js  installed.
• Either npm or another package manager like yarn  or pnpm .
• Some knowledge of Svelte . You don’t need to be an expert, but you should be comfortable with the basics.

First, spin up a new Svelte  project however you like; we recommend using Vite  and SvelteKit  but the choice is yours.

npx sv create my-svelte-flow-app

pnpm dlx sv create my-svelte-flow-app

yarn dlx sv create my-svelte-flow-app

bun x sv create my-svelte-flow-app

Then, navigate to your project directory and install the Svelte Flow package:

npm install @xyflow/svelte

pnpm add @xyflow/svelte

yarn add @xyflow/svelte

bun add @xyflow/svelte

Creating your first flow

The @xyflow/svelte package exports the <SvelteFlow /> component, which is the entrypoint for you flow. Importing the default styles and defining a handful of nodes and edges are all we need to get started!

There are a few things to pay attention to here:

• 🎨 You must import the Svelte Flow stylesheet.
• 📐 <SvelteFlow /> inherits the size of its parent. Wrap it in an element with dimensions.
• ⚡ Use $state.raw instead of deeply reactive state for the nodes and edges for performance reasons .

<script>
  import { SvelteFlow } from '@xyflow/svelte';
 
  import '@xyflow/svelte/dist/style.css';
 
  let nodes = $state.raw([
    { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
    { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
  ]);
 
  let edges = $state.raw([
    { id: 'e1-2', source: '1', target: '2' },
  ]);
</script>
 
<div style:width="100vw" style:height="100vh">
  <SvelteFlow bind:nodes bind:edges />
</div>