Building a Flow

In the following pages we will introduce you to the core concepts of Svelte Flow and explain how to create a basic interactive flow. A flow consists of nodes, edges and the viewport. If you haven’t reviewed our Key Concepts yet, we recommend doing that first.

To follow along with this guide you will need to have a Svelte project set up and install the @xyflow/svelte package:


npm install @xyflow/svelte


pnpm add @xyflow/svelte


yarn add @xyflow/svelte


bun add @xyflow/svelte

Creating the flow

Let’s start by creating an empty flow with viewport <Controls /> and a dotted <Background />.

Add imports

First, import the Svelte Flow Component and its required styles into your project. We’ll also import the Background component for visual enhancement, and the Controls component for the viewport controls.


<script>
import { SvelteFlow, Background, Controls } from '@xyflow/svelte';
import '@xyflow/svelte/dist/style.css';
</script>

Render SvelteFlow

Next, render the main component inside an element with defined dimensions and place the <Background /> and <Controls /> components inside SvelteFlow.

Content inside SvelteFlow stays fixed on top of the viewport. The Background component transforms its pattern to match viewport movement.


<div style:width="100vw" style:height="100vh">
    <SvelteFlow>
        <Background />
        <Controls />
    </SvelteFlow>
</div>

Empty flow

That’s it! You have created your first empty flow 🎉

If everything is set up correctly, you should see a blank canvas like this:

Adding nodes

Now that the flow is set up, let’s add some nodes - each node represents an element in your diagram with a specific position and content.

Create node objects

Outside of your Svelte component, in the <script> tag, create an array of node objects with these required properties:

id: A unique identifier for each node
position: The x and y coordinates
data: An object for storing custom data

We’ll use the $state.raw rune to make the array reactive.

Simply using $state would not only make the array reactive, but every property of each node, too. This could lead to performance issues , so we use $state.raw instead.


let nodes = $state.raw([
  {
    id: 'n1',
    position: { x: 0, y: 0 },
    data: { label: 'Node 1' },
    type: 'input',
  },
  {
    id: 'n2',
    position: { x: 100, y: 100 },
    data: { label: 'Node 2' },
    type: 'output',
  },
]);

Add nodes to the flow

Next, we bind the nodes to the SvelteFlow component. This two-way binding allows both the component and your code to modify the nodes.


<SvelteFlow bind:nodes>

`fitView`

We can use the fitView prop to automatically fit the initial viewport to the visible nodes.


<SvelteFlow bind:nodes fitView>

Flow with nodes

This gives us a flow with two labeled nodes 🎉

We have several built-in nodes that you can explore in the node reference. However, once you start building your own application, you will want to use custom nodes.

Adding edges

Now that we have two nodes, let’s connect them with an edge.

Create edge objects

To create an edge, we define an array of edge objects.

Each edge object needs to have an id, a source (where the edge begins), and a target (where it ends). In this example, we use the id values of the two nodes we created so far (n1 and n2) to define the edge:

We use the $state.raw rune to make the array reactive.


let edges = $state.raw([
  { id: 'n1-n2', source: 'n1', target: 'n2' },
]);

Add edges to the flow

As with nodes, we bind the edges to the SvelteFlow component.


<SvelteFlow bind:nodes bind:edges fitView>

Your flow should now look like this:

Edge label and type

By default, Svelte Flow allows you to add text labels to edges that will float in the middle of the edge via the label property. Also, many types of edges are built in, such as smoothstep and step. We can change the type of the edge by setting the type property.


let edges = $state.raw([
  { 
    id: 'n1-n2',
    source: 'n1',
    target: 'n2',
    type: 'smoothstep',
    label: 'connects with',
  },
]);

Done! 🎉

Congratulations! You have completed a basic flow with nodes and edges! 🎉

Full code example 🏁

You took your first steps in Svelte Flow! The completed flow will look like this: