Whiteboard

Collaborative sticky-note board. The host sees and manages notes on a canvas; participants submit notes via a prompt field. Notes can be added, edited, moved, deleted, and recolored. New notes spawn near notes of the same color to form clusters.

Example structures

Minimal

{
  "type": "Whiteboard",
  "data": {
    "text": "What do you think?"
  }
}

With initial notes

{
  "type": "Whiteboard",
  "data": {
    "text": "Share ideas for our sprint",
    "whiteboard": [
      {
        "position": { "x": -120, "y": 40 },
        "data": { "text": "Refactor auth", "color": "Blue" }
      },
      {
        "position": { "x": 60, "y": 100 },
        "data": { "text": "User tests", "color": "Yellow" }
      }
    ]
  }
}

Properties

Key	Type	Default	Description
data.text	string	—	Prompt shown to participants above the input field.
data.whiteboard	{ position:{x:number,y:number}; data:{ text:string; color?:string } }[]	[]	Optional initial notes. Colors are free-text names resolved in the UI (e.g., "Blue", "Yellow").

Roles and UI

Host view Canvas powered by React Flow. Notes are draggable. Each note has a menu for Edit, Remove, and Color. A spawn point tile and a toolbar button (“Neue Notiz Hinzufügen”) open the add dialog with color picker.

Participant view Prompt text, a textarea, and a submit button. Submissions create notes on the host board; participants don’t see the canvas.

Interactions & behavior

• Add: opens dialog (host) or uses participant input. Text is URI-encoded client-side and decoded when rendering.
• Move: drag a note; position is sent to the server.
• Edit/Delete: via note menu or context menu.
• Color: change via palette; updates immediately in the UI and on the server.
• Clustering: when adding a note, if notes of the same color exist, the server spawns the new note 150–200 px around a random note of that color; otherwise at a random position within ±300 px.

OpCodes (client → server)

Name	Value	Payload
ADD	0	{ text: string, color?: string }
DELETE	1	{ index: number }
EDIT	2	{ index: number, text: string }
MOVE	3	{ index: number, position: { x:number, y:number } }
CHANGE_COLOR	4	{ index: number, color: string }

Server state shape

interface WhiteboardState {
  whiteboard: Array<{
    position: { x: number; y: number };
    data: { text: string; color?: string };
  }>;
}

info

• The server defaults to "Yellow" if no color is provided on ADD. The client’s add dialog sends the selected color (default “Blue”), keeping both consistent.
• The node uses the default sendData behavior to broadcast updates. The React host view consumes the full whiteboard; the participant view only uses data.text.

Integration tip

Place the Whiteboard between a setup slide and a discussion slide, and follow with a Scoreboard or Summary node if you want to reflect on categories or voting outcomes.