LearnQuickstart

Quickstart

Svelte Flow is a highly customizable component for building interactive graphs and node-based editors, built by the creators of React Flow.

💡

This package is currently in an alpha state and under heavy development. The API is likely to change. You can read about the latest changes in the “What’s New” section.

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

Installation

The easiest way to get the latest version of Svelte Flow is to install it via npm, yarn or pnpm:

npm install @xyflow/svelte

Creating your first flow

We get started by stacking together the most important components of Svelte Flow: SvelteFlow, Controls, Background and MiniMap. A basic flow looks like this:

<script>
  import { writable } from 'svelte/store';
  import {
    SvelteFlow,
    Controls,
    Background,
    BackgroundVariant,
    MiniMap
  } from '@xyflow/svelte';
 
  // 👇 this is important! You need to import the styles for Svelte Flow to work
  import '@xyflow/svelte/dist/style.css';
 
  // We are using writables for the nodes and edges to sync them easily. When a user drags a node for example, Svelte Flow updates its position.
  const nodes = writable([
    {
      id: '1',
      type: 'input',
      data: { label: 'Input Node' },
      position: { x: 0, y: 0 }
    },
    {
      id: '2',
      type: 'default',
      data: { label: 'Node' },
      position: { x: 0, y: 150 }
    }
  ]);
 
  // same for edges
  const edges = writable([
    {
      id: '1-2',
      type: 'default',
      source: '1',
      target: '2',
      label: 'Edge Text'
    }
  ]);
 
  const snapGrid = [25, 25];
</script>
 
<!--
👇 By default, the Svelte Flow container has a height of 100%.
This means that the parent container needs a height to render the flow.
-->
<div style:height="500px">
  <SvelteFlow
    {nodes}
    {edges}
    {snapGrid}
    fitView
    on:nodeclick={(event) => console.log('on node click', event.detail.node)}
  >
    <Controls />
    <Background variant={BackgroundVariant.Dots} />
    <MiniMap />
  </SvelteFlow>
</div>

How to Contribute

Show us what you make: Drop it in into our Discord Server, tweet at us, or email us at info@xyflow.com

Community Participation: Ask and answer questions in our Discord Server or jump in on Github discussions.

Squash Bugs: We can’t catch them all. Check existing issues and discussions first, then create a new issue to tell us what’s up.

Financial Support: If you are an organization who wants to make sure Svelte Flow continues to be maintained, reach out to us at info@xyflow.com

And of course, we love Github stars ⭐

Installation