Building a Flow

Ready to create your first flow? This guide will walk you through the process step by step. If you haven’t reviewed our Key Concepts yet, we recommend doing that first.

Getting Started

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

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

Next, render the main component inside an element with defined dimensions and place the Background component inside SvelteFlow.

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

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. 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.

let nodes = $state.raw([
  {
    id: '1',
    position: { x: 0, y: 0 },
    data: { label: 'Hello' },
  },
  {
    id: '2',
    position: { x: 100, y: 100 },
    data: { label: 'World' },
  },
]);

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>

If you’ve followed these steps, you should see a flow that looks like this:

Adding edges

Let’s connect the nodes with an edge. Initialize a $state.raw with an array of edge objects that have these required properties:

• id: A unique identifier for the edge
• source: The ID of the source node
• target: The ID of the target node

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

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

<SvelteFlow bind:nodes bind:edges>

Your flow should now look like this:

Polishing the flow

This all might already go into the right drection but it still looks a little bland and lopsided, doesn’t it?

fitView

Add the fitView prop to automatically fit the initial viewport to the visible nodes.

<SvelteFlow bind:nodes bind:edges fitView>

Built-in node types

Let’s change the type of the first node to input and the second node to output. These are built-in node types, that come with a different set of handles.

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

Built-in edge types

We change the edge to type smoothstep and also give it a label!

let edges = $state.raw([
  { id: 'e1-2', source: '1', target: '2', type: 'smoothstep', label: 'Hello World' },
]);

Finished Flow

And there you have it! Your completed flow should look like this:

<script>
  import { SvelteFlow, Background } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';
 
  let nodes = $state.raw([
    {
      id: '1',
      type: 'input',
      position: { x: 0, y: 0 },
      data: { label: 'Hello' },
    },
    {
      id: '2',
      type: 'output',
      position: { x: 100, y: 100 },
      data: { label: 'World' },
    },
  ]);
 
  let edges = $state.raw([
    { id: 'e1-2', source: '1', target: '2', type: 'smoothstep', label: 'to the' },
  ]);
</script>
 
<div style:width="100vw" style:height="100vh">
  <SvelteFlow bind:nodes bind:edges fitView>
    <Background />
  </SvelteFlow>
</div>