ReferenceTypes
Node

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

#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.
Types