Skip to Content
📣 We just released Svelte Flow 1.0 Alpha — try it out and give us your feedback!
LearnQuickstart

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@next

Play online

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

JS
new.svelteflow.dev/js
TS
new.svelteflow.dev/ts

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

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

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

npm install @xyflow/svelte@next

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';
 
  const nodes = $state.raw([
    { id: '1', position: { x: 0, y: 0 }, data: { label: '1' } },
    { id: '2', position: { x: 0, y: 100 }, data: { label: '2' } },
  ]);
 
  const edges = $state.raw([
    { id: 'e1-2', source: '1', target: '2' },
  ]);
</script>
 
<div style:width="100vh" style:height="100vh">
  <SvelteFlow bind:nodes bind:edges />
</div>
Last updated on
Key Concepts