Feature Overview

This example provides an overview of Svelte Flow’s main features. See demonstrations of node types, edge types, interactions, layouts, and other capabilities in one comprehensive example. Perfect for understanding what’s possible with Svelte Flow.


<script module>
  import type { Node, NodeProps } from '@xyflow/svelte';
 
  export type AnnotationNode = Node<{
    label: string;
    level: number;
    arrowStyle?: string;
  }>;
</script>
 
<script lang="ts">
  let { data }: NodeProps<AnnotationNode> = $props();
</script>
 
<div class="annotation-content">
  <div class="annotation-level">{data.level}.</div>
  <div>{data.label}</div>
</div>
{#if data.arrowStyle}
  <div class="annotation-arrow" style={data.arrowStyle}>⤹</div>
{/if}