Low Level Design: Collaborative Whiteboard

Canvas Objects

Canvas objects: shapes (rect, circle, line, arrow), text boxes, freehand paths, images.

Data Schema

Object Table

Object (
  id UUID,
  board_id UUID,
  type ENUM(rect, circle, line, arrow, text, path, image),
  properties JSONB,  -- x/y/w/h/color/text/points
  z_index INT,
  created_by INT,
  updated_at TIMESTAMP,
  deleted BOOL
)

Board Table

Board (
  id UUID,
  name TEXT,
  owner_id INT,
  created_at TIMESTAMP
)

Operation Types

Operation types: add_object, update_object, delete_object, move_object.

Operational Transform (OT)

Server maintains canonical operation log; each client op includes revision number; server transforms concurrent ops for consistency.

Conflict resolution: last-write-wins per object property (simpler than full OT).

Real-Time Sync

WebSocket room per board_id; ops broadcast to all connected clients.

Persistence

OperationLog Table

OperationLog (
  board_id UUID,
  seq INT,
  op_type TEXT,
  object_id UUID,
  payload JSONB,
  user_id INT,
  created_at TIMESTAMP
)

State reconstruction: replay ops from seq=0 or load snapshot + replay since snapshot.

Snapshot: board state serialized to JSON every 100 ops.

Undo / Redo

Per-user op stack; inverse ops applied on undo.

{
“@context”: “https://schema.org”,
“@type”: “FAQPage”,
“mainEntity”: [
{
“@type”: “Question”,
“name”: “What data model is used for a collaborative whiteboard?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “Each canvas object (shape, text, path) is stored in an Object table with a JSONB properties column for x/y/w/h/color/text/points, plus board_id, z_index, created_by, updated_at, and a deleted flag for soft deletes.”
}
},
{
“@type”: “Question”,
“name”: “How does real-time sync work in a collaborative whiteboard?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “A WebSocket room is opened per board_id. When any client performs an operation (add, update, delete, move), the op is broadcast to all connected clients in that room and persisted to an OperationLog table.”
}
},
{
“@type”: “Question”,
“name”: “How are conflicts resolved in a collaborative whiteboard?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “Last-write-wins per object property is the simplest approach. Each client op includes a revision number; the server transforms concurrent ops against its canonical op log. For full consistency, Operational Transform or CRDT can be applied.”
}
},
{
“@type”: “Question”,
“name”: “How does undo/redo work in a shared whiteboard?”,
“acceptedAnswer”: {
“@type”: “Answer”,
“text”: “Each user maintains a personal op stack. Undo applies the inverse of the last op (e.g., delete undoes an add). Snapshots are taken every 100 ops so the board can be reconstructed from a snapshot plus a short replay of subsequent ops.”
}
}
]
}