Quick Start

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. If you want to get up and running as soon as possible, you’re in the right place!

Installation

To install Svelte Flow in your existing Svelte project, run the following command:

npm install @xyflow/svelte

pnpm add @xyflow/svelte

yarn add @xyflow/svelte

bun add @xyflow/svelte

Templates

If you want to get started right away, you can use a template.

Svelte Flow Vite template

We have a ready-to-use Vite template  that you can use to get up and running in no time.

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

SvelteKit template

Alternatively, you can spin up a new Svelte  with SvelteKit  and Vite  templates.

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

Next, cd into 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

Usage

The @xyflow/svelte package exports the <SvelteFlow /> component, which is the entrypoint for your 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 fitView colorMode="system">
    <Controls />
    <MiniMap />
    <Background variant={BackgroundVariant.Dots} gap={12} size={1} />
  </SvelteFlow>
</div>

Result

Et voila. You’ve already created your first interactive flow! 🎉

Next steps