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.


export type Node<
  NodeData extends Record<string, unknown>,
  NodeType extends string,
> = {
  id: string;
  position: XYPosition;
  data: NodeData;
  type?: NodeType;
  sourcePosition?: Position;
  targetPosition?: Position;
  hidden?: boolean;
  selected?: boolean;
  dragging?: boolean;
  draggable?: boolean;
  selectable?: boolean;
  connectable?: boolean;
  resizing?: boolean;
  deletable?: boolean;
  dragHandle?: string;
  width?: number;
  height?: number;
  parentId?: string;
  zIndex?: number;
  extent?: 'parent' | CoordinateExtent;
  ariaLabel?: string;
  origin?: NodeOrigin;
  style?: string;
  class?: string;
  measured?: {
    width?: number;
    height?: number;
  };
};

Fields

Name	Type
#`id`	`string`
#`position`	`XYPosition`
#`data`	`T`
#`type?`	`U`
#`sourcePosition?`	`Position`
#`targetPosition?`	`Position`
#`hidden?`	`boolean`
#`selected?`	`boolean`
#`dragging?`	`boolean`
#`draggable?`	`boolean`
#`selectable?`	`boolean`
#`connectable?`	`boolean`
#`resizing?`	`boolean`
#`deletable?`	`boolean`
#`dragHandle?`	`string`
#`width?`	`number \| null`
#`height?`	`number \| null`
#`parentId?`	`string`
#`zIndex?`	`number`
#`extent?`	`"parent" \| CoordinateExtent`
#`expandParent?`	`boolean`
#`ariaLabel?`	`string`
#`origin?`	`NodeOrigin`
#`style?`	`string`
#`class?`	`string`

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.