<EdgeReconnectAnchor />

If you want a way to make your edges updatable, you can use the <EdgeReconnectAnchor /> component. This component is used to create a reconnection point on your custom edges. They behave similar to handles:

You can start dragging on an <EdgeReconnectAnchor />
This starts a new connection process and from the oppsite side of the edge
You can finish the connection the same way as it had been started from a handle

CustomEdge.svelte


<script lang="ts">
  import {
    BaseEdge,
    EdgeReconnectAnchor,
    getBezierPath,
    type EdgeProps,
  } from '@xyflow/svelte';
 
  let { sourceX, sourceY, targetX, targetY, selected, data, ...props }: EdgeProps = $props();
 
  const [edgePath] = $derived(getBezierPath({
    sourceX,
    sourceY,
    targetX,
    targetY,
  }));
 
  let reconnecting = $state(false);
</script>
 
<!-- We want to hide the initial edge while reconnecting -->
{#if !reconnecting}
  <BaseEdge path={edgePath} {...props} />
{/if}
 
<!-- We only want to be able to reconnect when an edge is selected  -->
{#if selected}
  <EdgeReconnectAnchor
    bind:reconnecting
    type="source"
    position={{ x: sourceX, y: sourceY }}
  />
  <EdgeReconnectAnchor
    bind:reconnecting
    type="target"
    position={{ x: targetX, y: targetY }}
  />
{/if}

This example renders invisible reconnection points. Naturally, you can also render an icon inside the <EdgeReconnectAnchor /> component.

Props

The type for props of <EdgeReconnectAnchor /> component is exported as EdgeReconnectAnchorProps. Additionally, it extends the props of <div />.

Name	Type	Default
`reconnecting`	`boolean`
`type`	`'source' \| 'target'`
`position`	`XYPosition`
`size`	`number`
`dragThreshold`	`number`
`...props`	`HTMLAttributes<HTMLDivElement>`