Cloudflare Whiteboard — Durable Real-Time Collaboration

## Overview

A deliberately compact reference architecture for real-time collaboration on the Cloudflare Developer Platform. A React and SVG client applies edits optimistically, while a board-specific Durable Object authenticates separate edit and view capabilities, assigns every mutation a monotonic sequence, persists canonical vector state to embedded SQLite, and broadcasts only after the write succeeds. Cursor presence stays transient, reconnecting clients receive an operation delta or materialized snapshot, and a 30-day alarm removes inactive boards. The editor starts with a draw-to-type text box that wraps content and grows automatically, alongside shapes, freehand tools, grouping, alignment, export, and responsive touch controls.

## Highlights

• -> One SQLite-backed Durable Object per board provides authoritative operation ordering and materialized vector state
• -> Hibernatable WebSockets separate durable mutations from transient cursor and selection presence
• -> Edit and view capability tokens stay in URL fragments; only SHA-256 hashes are persisted server-side
• -> Reconnect protocol resumes from a bounded operation tail or falls back to a full canonical snapshot
• -> Public-demo guardrails cover board creation, authentication deadlines, room capacity, message rates, element counts, and 30-day cleanup

## Architecture

Browser clients (React + SVG)
    │   HTTPS creation + hibernatable WebSocket
    ▼
Cloudflare Worker
    ├── static assets + security headers
    ├── per-IP board-creation rate limit
    └── getByName(boardId)
            ▼
Board Durable Object (one per board)
    ├── capability enforcement (edit / view)
    ├── monotonic operation ordering
    ├── transient cursor + selection presence
    ├── SQLite ── elements + bounded operation tail
    └── Alarm ─── 30-day inactivity cleanup

## Tech Stack