Skip to Content
✨ Svelte Flow 1.0 is here! Rewritten for Svelte 5 with many new features and improvements.

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

NameTypeDefault
markerStartstring

Marker at start of edge

markerEndstring

Marker at end of edge

interactionWidthnumber

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.

labelstring
labelStylestring
pathstring

SVG path of the edge

labelXnumber

The x coordinate of the label

labelYnumber

The y coordinate of the label

...propsOmit<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.
Last updated on