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
| Name | Type | Default |
|---|---|---|
id | stringUnique id of a node. | |
position | XYPositionPosition of a node on the pane. | |
data | NodeDataArbitrary data passed to a node. | |
type | NodeTypeType of node defined in | |
sourcePosition | PositionOnly relevant for default, source, target nodeType. Controls source position. | |
targetPosition | PositionOnly relevant for default, source, target nodeType. Controls target position. | |
selected | boolean | |
dragging | booleanWhether or not the node is currently being dragged. | |
draggable | booleanWhether or not the node is able to be dragged. | |
selectable | boolean | |
connectable | boolean | |
deletable | boolean | |
dragHandle | stringA 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 | stringParent node id, used for creating sub-flows. | |
zIndex | number | |
extent | "parent" | CoordinateExtentBoundary a node can be moved in. | |
expandParent | booleanWhen | |
ariaLabel | string | |
origin | NodeOriginOrigin of the node relative to its position. | |
handles | NodeHandle[] | |
measured | { width?: number; height?: number; } | |
class | ClassValue | |
style | string | |
focusable | boolean |
Notes
- You shouldn’t try to set the
measured.widthormeasured.heightof 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 thewidthandheightattributes.