<BaseEdge />

Source on GitHub

The <BaseEdge /> component gets used internally for all the edges. It can be used inside a custom edge and handles the invisible helper edge and the edge label for you.

CustomEdge.svelte


<script lang="ts">
  import { BaseEdge, getBezierPath, type EdgeProps } from '@xyflow/svelte';
 
  let { sourceX, sourceY, targetX, targetY, ...props } : EdgeProps = $props();
 
  const [edgePath] = $derived(getBezierPath({
    sourceX,
    sourceY,
    targetX,
    targetY,
  }));
 
  const {
    markerStart,
    markerEnd,
    interactionWidth,
    label,
    labelStyle,
  } = props;
</script>
 
<BaseEdge
  path={edgePath}
  {markerStart}
  {markerEnd}
  {interactionWidth}
  {label}
  {labelStyle}
/>

Props

The type for props of <BaseEdge /> component is exported as BaseEdgeProps. Additionally, it extends the props of <svg />.

Name	Type	Default
`markerStart`	`string` Marker at start of edge
`markerEnd`	`string` Marker at end of edge
`interactionWidth`	`number` ReactFlow renders an invisible path around each edge to make them easier to click or tap on. This property sets the width of that invisible path.
`label`	`string`
`labelStyle`	`string`
`path`	`string` SVG path of the edge
`labelX`	`number` The x coordinate of the label
`labelY`	`number` The y coordinate of the label
`...props`	`Omit<HTMLAttributes<SVGPathElement>, "markerStart" \| "markerEnd" \| "d" \| "path">`

Notes

If you want to use an edge marker with the <BaseEdge /> component, you can pass the markerStart or markerEnd props passed to your custom edge through to the <BaseEdge /> component. You can see all the props passed to a custom edge by looking at the EdgeProps type.