📣 Take the 2024 Svelte Flow Developer Survey

Edge<T>

An Edge is the complete description with everything Svelte Flow needs to know in order to render it.

export type Edge<T> =
  | DefaultEdge<T>
  | SmoothStepEdgeType<T>
  | BezierEdgeType<T>;

Variants

DefaultEdge<T>

Name	Type
#`id`	`string`
#`type`	`string`
#`style?`	`string`
#`class?`	`string`
#`label?`	`string`
#`source`	`string`
#`target`	`string`
#`sourceHandle`	`string \| null`
#`targetHandle`	`string \| null`
#`data`	`T`
#`hidden`	`boolean`
#`animated`	`boolean`
#`selected`	`boolean`
#`deletable`	`boolean`
#`selectable`	`boolean`
#`markerStart`	`string \| EdgeMarker`
#`markerEnd`	`string \| EdgeMarker`
#`zIndex?`	`number`
#`interactionWidth`	`number`
#`ariaLabel`	`string`

SmoothStepEdgeType<T>

The SmoothStepEdgeType variant has all the same fields as the DefaultEdge variant, but it also has the following additional fields:

Name	Type
#`type`	`"smoothstep"`
#`pathOptions?`	`object`
#`pathOptions.offset?`	`number`
#`pathOptions.borderRadius?`	`number`

BezierEdgeType<T>

The BezierEdgeType variant has all the same fields as the DefaultEdge variant, but it also has the following additional fields:

Name	Type
#`type`	`"default"`
#`pathOptions?`	`object`
#`pathOptions.curvature?`	`number`