Edge Labels

You can simply render an edge label by using the <EdgeLabel /> component. You can simply pass the label positions to it that our path helper functions (getBezierPath, getSmoothStepPath etc.) returns and it will handle the rest. See CustomEdge.svelte.

If you need more control of your edge labels, you can use the <EdgeLabelRenderer /> component. It’s a portal component that lets you render edge labels (or anything you like really) on top of the edges container. <Edge Label> uses <EdgeLabelRenderer /> internally. See CustomEdgeStartEnd.svelte.

If you want to mimic the behaviour of <Edge Label> you need to handle some things yourself:

• make sure the <div /> you pass has position: absolute; and translate(-50%, -50%)
• to add mouse interactions you need to set pointer-events: all
• to select the node when clicking on the label you can call the handleEdgeSelect helper from the store via useStore

<script lang="ts">
  import {
    SvelteFlow,
    Background,
    type Node,
    type Edge,
    type EdgeTypes,
  } from '@xyflow/svelte';
 
  import '@xyflow/svelte/dist/style.css';
 
  import { initialNodes, initialEdges } from './nodes-and-edges';
 
  import CustomEdge from './CustomEdge.svelte';
  import CustomEdgeStartEnd from './CustomEdgeStartEnd.svelte';
 
  let nodes = $state.raw<Node[]>(initialNodes);
  let edges = $state.raw<Edge[]>(initialEdges);
 
  const edgeTypes: EdgeTypes = {
    custom: CustomEdge,
    'start-end': CustomEdgeStartEnd,
  };
</script>
 
<SvelteFlow bind:nodes bind:edges {edgeTypes} fitView>
  <Background />
</SvelteFlow>