Types

BackgroundVariant

The three variants are exported as an enum for convenience. You can eithe import the enum and use it like BackgroundVariant.Lines or you can use the raw string value directly.

ColorMode

The color mode type specifies if the current color mode is light, dark or uses system.

Connection

The Connection type is the basic minimal description of an Edge between two nodes.

With the connectionLineType prop on your SvelteFlow component, you can configure the type of the connection line. Svelte Flow comes with built-in support for the following types; default (bezier), straight, step, smoothstep, and simplebezier.

CoordinateExtent

A coordinate extent represents two points in a coordinate system; one in the top left corner and one in the bottom right corner. It is used to represent the bounds of nodes in the flow or the bounds of the viewport.

DefaultEdgeOptions

Many properties on an Edge are optional. When a new edge is created, the properties that are not provided will be filled in with the default values passed to the defaultEdgeOptions prop of the <SvelteFlow /> component.

Edge

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

EdgeMarker

You can customize the built-in edge markers with the edgeMarker prop.

EdgeProps

When you implement a custom edge it is wrapped in a component that enables some basic functionality.

FitViewOptions

When calling fitView these options can be used to customize the behaviour. For example, the duration option can be used to transform the viewport smoothly over a given amount of time.

InternalNode

The internal node is an extension of the user nod. It is used internally and has some more information that is not exposed to the user directly, like positionAbsolute and handleBounds.

KeyDefinition

A key definition is a string or an object that describes a key and a modifier.

MarkerType

Node

The Node type represents everything Svelte Flow needs to know about a given node. Many of these properties can be manipulated both by Svelte Flow or by you, but some such as width and height should be considered read-only.

NodeProps

When you implement a custom node it is wrapped in a component that enables basic functionality like drag, select and remove. A custom node gets the following props.

NodeOrigin

The origin of a Node determines how it is placed relative to its own coordinates.

PanelPosition

This type is mostly used to help position things on top of the flow viewport. For example both the MiniMap and Controls components take a position prop of this type.

Position

While PanelPosition can be used to place a component in the corners of a container, the Position enum is less precise and used primarily in relation to edges and handles.

SvelteFlowStore

The internal data structure of the Svelte Flow store.

Viewport

The Viewport type tells you where in the coordinate system your flow is currently being display at and how zoomed in or out it is.

XYPosition

All positions are stored in an object with x and y coordinates.

Hooks