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

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

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 />
</div>

Result

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

Next steps