Node<T, U>

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<T, U extends string> = {
  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;
  parentNode?: string;
  zIndex?: number;
  extent?: 'parent' | CoordinateExtent;
  expandParent?: boolean;
  ariaLabel?: string;
  origin?: NodeOrigin;
  style?: string;
  class?: string;
  computed?: {
    width?: number;
    height?: number;
    positionAbsolute?: XYPosition;
  };
};

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`
#`parentNode?`	`string`
#`zIndex?`	`number`
#`extent?`	`"parent" \| CoordinateExtent`
#`expandParent?`	`boolean`
#`positionAbsolute?`	`XYPosition`
#`ariaLabel?`	`string`
#`origin?`	`NodeOrigin`
#`style?`	`string`
#`class?`	`string`

Notes

You shouldn't try to set the width or height of a node directly. It is calculated internally by Svelte Flow and used when rendering the node in the viewport. To control a node's size you should use the style or class props to apply CSS styles instead.

MarkerType NodeProps