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 (opens in a new tab) and installable via:

npm install @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 (opens in a new tab) 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 Svelte React before, we suggest starting your journey with the "Welcome to Svelte" tutorial (opens in a new tab).