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

The MiniMap provides a bird’s-eye view of your flowgraph, making navigation easier, especially for larger flows. You can customize the appearance of nodes in the minimap 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

The Background component adds a visual grid pattern to your flowgraph, helping users maintain orientation. You can choose from different pattern variants, or if you need more advanced customization, you can explore the source code to implement your own pattern.


<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

The Panel component allows you to add fixed overlays to your flowgraph, perfect for titles, controls, or any other UI elements that should remain stationary.


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