<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.

<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 />.

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.