Groups

Organize nodes into visual groups for better flow management.

Group Features

  • Drag nodes into groups - Nodes become children
  • Drag nodes out - Nodes become standalone
  • Double-click label - Edit group name
  • Right-click group - Color picker menu
  • Drag corner - Resize group
  • Move group - Children move with it

Creating Groups

const nodes = [
  // Group node
  {
    id: 'group-1',
    type: 'group',
    position: { x: 50, y: 50 },
    width: 250,
    height: 200,
    data: { 
      label: 'My Group', 
      color: '#eb5425' 
    }
  },
  // Child node
  {
    id: 'child-1',
    type: 'simple',
    position: { x: 70, y: 90 },
    data: { label: 'Child' },
    parent_id: 'group-1' // Links to parent
  }
];

Register GroupNode

import { GroupNode } from 'kaykay';

const nodeTypes = {
  group: GroupNode,
  custom: MyCustomNode
};

Group Data Properties

labelDisplay name
colorBorder & label color
widthGroup width (on node)
heightGroup height (on node)
Try it: Drag the standalone node into one of the groups, then move the group to see the node follow!
Inputs
Source A
Source B
Processing
Transform
Output
Drag me into a group!