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

Node<NodeData, NodeType>

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.

Fields

NameTypeDefault
idstring

Unique id of a node.

positionXYPosition

Position of a node on the pane.

dataNodeData

Arbitrary data passed to a node.

typeNodeType

Type of node defined in nodeTypes.

sourcePositionPosition

Only relevant for default, source, target nodeType. Controls source position.

targetPositionPosition

Only relevant for default, source, target nodeType. Controls target position.

hiddenboolean

Whether or not the node should be visible on the canvas.

selectedboolean
draggingboolean

Whether or not the node is currently being dragged.

draggableboolean

Whether or not the node is able to be dragged.

selectableboolean
connectableboolean
deletableboolean
dragHandlestring

A class name that can be applied to elements inside the node that allows those elements to act as drag handles, letting the user drag the node by clicking and dragging on those elements.

widthnumber
heightnumber
initialWidthnumber
initialHeightnumber
parentIdstring

Parent node id, used for creating sub-flows.

zIndexnumber
extent"parent" | CoordinateExtent

Boundary a node can be moved in.

expandParentboolean

When true, the parent node will automatically expand if this node is dragged to the edge of the parent node’s bounds.

ariaLabelstring
originNodeOrigin

Origin of the node relative to its position.

handlesNodeHandle[]
measured{ width?: number; height?: number; }
classClassValue
stylestring
focusableboolean

Notes

  • You shouldn’t try to set the measured.width or measured.height of a node directly. It is measured internally by Svelte Flow and used when rendering the node in the viewport. To control a node’s size you should use the width and height attributes.
Last updated on