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

The id of the SVG marker to use at the start of the edge. This should be defined in a <defs> element in a separate SVG document or element. Use the format “url(#markerId)” where markerId is the id of your marker definition.

markerEndstring

The id of the SVG marker to use at the end of the edge. This should be defined in a <defs> element in a separate SVG document or element. Use the format “url(#markerId)” where markerId is the id of your marker definition.

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