Svelte Flow is still alpha! Check out the latest changes here.
Examples
Feature Overview

Feature Overview

This is a overview example with all the built in features of Svelte Flow. You can see different node types (input, default, output), edge types (bezier, step and smoothstep), edge labels and custom styled edge labels. On the bottom left you see the Controls and on the bottom right the MiniMap component.

<script lang="ts">
  import {
    SvelteFlow,
    Background,
    Controls,
    MiniMap,
    type NodeTypes,
    type EdgeTypes,
    type Edge,
    type Node,
  } from '@xyflow/svelte';

  import '@xyflow/svelte/dist/style.css';

  import { initialNodes, initialEdges } from './nodes-and-edges';

  import AnnotationNode from './AnnotationNode.svelte';
  import ButtonEdge from './ButtonEdge.svelte';
  import CircleNode from './CircleNode.svelte';
  import ResizerNode from './ResizerNode.svelte';
  import ToolbarNode from './ToolbarNode.svelte';
  import TextNode from './TextNode.svelte';

  const nodeTypes: NodeTypes = {
    annotation: AnnotationNode,
    tools: ToolbarNode,
    circle: CircleNode,
    resizer: ResizerNode,
    textinput: TextNode,
  };

  const edgeTypes: EdgeTypes = {
    button: ButtonEdge,
  };

  let nodes = $state.raw<Node[]>(initialNodes);
  let edges = $state.raw<Edge[]>(initialEdges);
</script>

<SvelteFlow
  class="overview"
  bind:nodes
  bind:edges
  {nodeTypes}
  {edgeTypes}
  fitView
>
  <Background patternColor="#aaa" gap={16} />
  <Controls />
  <MiniMap zoomable pannable height={120} nodeClass={(node)
Read-only
Last updated on
useSvelteFlow