addEdge()

Source on GitHub

This util is a convenience function to add a new Edge to an array of edges. It also performs some validation to make sure you don’t add an invalid edge or duplicate an existing one.


import { addEdge } from '@xyflow/svelte';
 
let edges = $state.raw([]);
 
const onAddEdge = () => {
  const newEdge = {
    id: '1-2',
    source: '1',
    target: '2',
  };
  edges = addEdge(newEdge, edges);
};

Signature

Parameters:

Name	Type	Default
`edgeParams`	`EdgeType \| Connection`
`edges`	`EdgeType[]`
`options.getEdgeId`	`GetEdgeId` Custom function to generate edge IDs. If not provided, the default `getEdgeId` function is used.
`options.onError`	`OnError` Called when edge validation fails. If not provided, a default dev warning is used.

Returns:

EdgeType[]

Notes

If an edge with the same target and source already exists (and the same targetHandle and sourceHandle if those are set), then this util won’t add a new edge even if the id property is different.