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

EdgeProps

When you implement a custom edge it is wrapped in a component that enables some basic functionality. Your custom edge component receives the following props:

Fields

NameTypeDefault
idEdgeType["id"]

Unique id of an edge.

typeEdgeType["type"] & string

Type of edge defined in edgeTypes.

sourceEdgeType["source"]

Id of source node.

targetEdgeType["target"]

Id of target node.

animatedEdgeType["animated"]
hiddenEdgeType["hidden"]
deletableEdgeType["deletable"]
selectableEdgeType["selectable"]
dataany

Arbitrary data passed to an edge.

selectedEdgeType["selected"]
markerStartEdgeType["markerStart"] & string

Set the marker on the beginning of an edge.

markerEndEdgeType["markerEnd"] & string

Set the marker on the end of an edge.

zIndexEdgeType["zIndex"]
ariaLabelEdgeType["ariaLabel"]
interactionWidthEdgeType["interactionWidth"]

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.

labelEdgeType["label"]
labelStyleEdgeType["labelStyle"]
styleEdgeType["style"]
classEdgeType["class"]
focusableEdgeType["focusable"]
sourceXnumber
sourceYnumber
targetXnumber
targetYnumber
sourcePositionPosition
targetPositionPosition
sourceHandleIdstring | null
targetHandleIdstring | null
Last updated on