Built-In Components

Svelte Flow comes with several additional components that you can plug into your flow. All you have to do is import and add them as children to the SvelteFlow component.

BuiltInComponents.svelte


<script>
  import { SvelteFlow, MiniMap, Controls, Background, Panel } from '@xyflow/svelte';
 
  import '@xyflow/svelte/dist/style.css';
</script>
 
<SvelteFlow>
  <MiniMap />
  <Controls />
  <Background />
  <Panel position="top-left">
    <h1>My Flow</h1>
  </Panel>
</SvelteFlow>

MiniMap

Especially for bigger flows, a MiniMap can help with navigation. You can easily modify the appearance of each node by providing a nodeColor function.


<script>
  import { SvelteFlow, MiniMap } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';
 
  let nodes = $state.raw([
    {
      id: '1',
      type: 'input',
      position: { x: 250, y: 25 },
      data: { label: 'Input' },
      style: 'background: #6ede87; color: white;',
    },
    {
      id: '2',
      position: { x: 100, y: 125 },
      data: { label: 'Default' },
      style: 'background: #ff0072; color: white;',
    },
    {
      id: '3',
      type: 'output',
      position: { x: 250, y: 250 },
      data: { label: 'Output' },
      style: 'background: #6865A5; color: white;',
    },
  ]);
 
  let edges = $state.raw([
    { id: 'e1-2', source: '1', target: '2' },
    { id: 'e2-3', source: '2', target: '3', animated: true },
  ]);
</script>
 
<SvelteFlow bind:nodes bind:edges fitView>
  <MiniMap
    nodeColor={(node) => {
      switch (node.type) {
        case 'input':
          return '#6ede87';
        case 'output':
          return '#6865A5';
        default:
          return '#ff0072';
      }
    }}
    zoomable
    pannable
  />
</SvelteFlow>

Controls

Svelte Flow comes with a set of customizable Controls for the viewport. You can zoom in and out, fit the viewport and toggle if the user can move, select and edit the nodes.


<script>
  import { SvelteFlow, Controls } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';
 
  let nodes = $state.raw([
    {
      id: '1',
      type: 'input',
      position: { x: 250, y: 25 },
      data: { label: 'Input' },
    },
    {
      id: '2',
      position: { x: 100, y: 125 },
      data: { label: 'Default' },
    },
    {
      id: '3',
      type: 'output',
      position: { x: 250, y: 250 },
      data: { label: 'Output' },
    },
  ]);
 
  let edges = $state.raw([
    { id: 'e1-2', source: '1', target: '2' },
    { id: 'e2-3', source: '2', target: '3', animated: true },
  ]);
</script>
 
<SvelteFlow bind:nodes bind:edges fitView>
  <Controls />
</SvelteFlow>

Background

It is helpful for orientation to display a repeating pattern in the viewport. With the Background component you can choose between different variants. If you want to implement your own pattern or maybe even do more advanced things, take a look at the source code for the Background component.


<script lang="ts">
  import { SvelteFlow, Background, Panel, BackgroundVariant } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';
 
  let nodes = $state.raw([
    {
      id: '1',
      type: 'input',
      position: { x: 250, y: 25 },
      data: { label: 'Input' },
    },
    {
      id: '2',
      position: { x: 100, y: 125 },
      data: { label: 'Default' },
    },
    {
      id: '3',
      type: 'output',
      position: { x: 250, y: 250 },
      data: { label: 'Output' },
    },
  ]);
 
  let edges = $state.raw([
    { id: 'e1-2', source: '1', target: '2' },
    { id: 'e2-3', source: '2', target: '3', animated: true },
  ]);
 
  let variant: BackgroundVariant = $state(BackgroundVariant.Lines);
</script>
 
<SvelteFlow bind:nodes bind:edges fitView>
  <Background {variant} />
  <Panel position="top-left">
    <div>variant:</div>
    <button
      onclick={() => {
        variant = BackgroundVariant.Dots;
      }}>dots</button
    >
    <button
      onclick={() => {
        variant = BackgroundVariant.Lines;
      }}>lines</button
    >
    <button
      onclick={() => {
        variant = BackgroundVariant.Cross;
      }}>cross</button
    >
  </Panel>
</SvelteFlow>

Panel

To quickly overlay things on top of the viewport, you can use the Panel component.


<script>
  import { SvelteFlow, Panel, Background } from '@xyflow/svelte';
  import '@xyflow/svelte/dist/style.css';
</script>
 
<SvelteFlow>
  <Panel position="top-left">top-left</Panel>
  <Panel position="top-center">top-center</Panel>
  <Panel position="top-right">top-right</Panel>
  <Panel position="bottom-left">bottom-left</Panel>
  <Panel position="bottom-center">bottom-center</Panel>
  <Panel position="bottom-right">bottom-right</Panel>
  <Panel position="center-left">center-left</Panel>
  <Panel position="center-right">center-right</Panel>
  <Background />
</SvelteFlow>