Installation and Requirements

In order to start, you need node.js and npm, yarn or pnpm installed on your machine. The Svelte Flow package is published on npm under @xyflow/svelte and installable via:

npm install @xyflow/svelte

pnpm add @xyflow/svelte

yarn add @xyflow/svelte

bun add @xyflow/svelte

Now you can import the Svelte Flow component and the styles in your application:

import { SvelteFlow } from '@xyflow/svelte';
 
// 👇 this is important! You need to import the styles for Svelte Flow to work
import '@xyflow/svelte/dist/style.css';

Prior Experience Needed

As the name implies Svelte Flow is a Svelte library. That means Svelte developers will likely find it easy to work with. If you’re not already familiar with fundamental Svelte terms and concepts such as stores, props, and components you may need to get a better understanding of Svelte basics before you can make full use of Svelte Flow. If you’ve never used Svelte before, we suggest starting your journey with the “Welcome to Svelte” tutorial.