Custom Edges

This example shows how to create and use custom edge types in Svelte Flow. You can define your own edge components with custom rendering, animations, and interactions. Custom edges are useful for creating specialized visualizations or implementing complex edge behaviors.


<script lang="ts">
  import {
    SvelteFlow,
    Background,
    ConnectionMode,
    Controls,
    type Node,
    type Edge,
  } from '@xyflow/svelte';
 
  import '@xyflow/svelte/dist/style.css';
 
  import { initialNodes, initialEdges } from './nodes-and-edges';
 
  import ButtonEdge from './ButtonEdge.svelte';
  import BiDirectionalEdge from './BiDirectionalEdge.svelte';
  import BiDirectionalNode from './BiDirectionalNode.svelte';
  import SelfConnectingEdge from './SelfConnectingEdge.svelte';
 
  let nodes = $state.raw<Node[]>(initialNodes);
  let edges = $state.raw<Edge[]>(initialEdges);
 
  const nodeTypes = {
    bidirectional: BiDirectionalNode,
  };
 
  const edgeTypes = {
    buttonedge: ButtonEdge,
    bidirectional: BiDirectionalEdge,
    selfconnecting: SelfConnectingEdge,
  };
</script>
 
<SvelteFlow
  bind:nodes
  {nodeTypes}
  bind:edges
  {edgeTypes}
  connectionMode={ConnectionMode.Loose}
  fitView
>
  <Controls />
  <Background />
</SvelteFlow>