Building a Flow

Let’s not beat around the bush: You’re here because you want to learn how to build a flow. If you haven’t learned about our Key Concepts yet, we recommend you do that first.

Getting Started

First, you need to import the Svelte Flow Component and the required styles into your project. We also go ahead an import the Background component.

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

Next, make sure you render the main component inside an element that has a defined width and height and put the Background component inside the SvelteFlow component.

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

If you successfully rendered the component, you should see a blank canvas like this:

Adding nodes

Now that the flow is set up, let’s add some nodes. To do this, you need to create an array with node objects. Required properties for node objects are:

• id: unique identifier
• position: x and y coordinate
• data: an object for storing custom data

To make the array reactive, we will use the $state rune.

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. We are using bind here because both us and the SvelteFlow component need to make changes to the nodes.

<SvelteFlow bind:nodes>

If you followed the steps above you should end up with a flow that looks like this:

Adding edges

Let’s connect the nodes with an edge. To do this, we go ahead and create a $state.raw array with edge objects. Required properties for edge objects are:

• id: unique identifier
• source: id of the source node
• target: id of the target node

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

Same as with the nodes, we bind  the edges to the SvelteFlow component.

<SvelteFlow bind:nodes bind:edges>

If you followed the steps above you should end up with a flow that looks 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

We can pass fitView to the SvelteFlow component to 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

Finally, 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

Et voilà! We have a flow that looks 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>