Node<NodeData, NodeType>

The Node type represents everything Svelte Flow needs to know about a given node.

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.

Fields

Name	Type	Default
`id`	`string` Unique id of a node.
`position`	`XYPosition` Position of a node on the pane.
`data`	`NodeData` Arbitrary data passed to a node.
`sourcePosition`	`Position` Only relevant for default, source, target nodeType. Controls source position.
`targetPosition`	`Position` Only relevant for default, source, target nodeType. Controls target position.
`hidden`	`boolean` Whether or not the node should be visible on the canvas.
`selected`	`boolean`
`dragging`	`boolean` Whether or not the node is currently being dragged.
`draggable`	`boolean` Whether or not the node is able to be dragged.
`selectable`	`boolean`
`connectable`	`boolean`
`deletable`	`boolean`
`dragHandle`	`string` 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.
`width`	`number`
`height`	`number`
`initialWidth`	`number`
`initialHeight`	`number`
`parentId`	`string` Parent node id, used for creating sub-flows.
`zIndex`	`number`
`extent`	`CoordinateExtent \| "parent" \| null` Boundary a node can be moved in.
`expandParent`	`boolean` When `true`, the parent node will automatically expand if this node is dragged to the edge of the parent node’s bounds.
`ariaLabel`	`string`
`origin`	`NodeOrigin` Origin of the node relative to its position.
`handles`	`NodeHandle[]`
`measured`	`{ width?: number; height?: number; }`
`type`	`string \| NodeType \| (NodeType & undefined)` Type of node defined in nodeTypes
`class`	`ClassValue`
`style`	`string`
`focusable`	`boolean`
`ariaRole`	`AriaRole \| null \| undefined` The ARIA role attribute for the node element, used for accessibility.	`"group"`
`domAttributes`	`Omit<HTMLAttributes<HTMLDivElement>, "id" \| "draggable" \| "class" \| "style" \| "role" \| "aria-label" \| "dangerouslySetInnerHTML" \| keyof DOMAttributes<HTMLDivElement>>` General escape hatch for adding custom attributes to the node’s DOM element.