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
.
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 />
</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 nodeposition
: The x and y coordinatesdata
: 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: '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 edgesource
: The ID of the source nodetarget
: 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>