AE NOTE

Position this as the feature the product team wants but can't justify engineering time for. The 6-month estimate came from: WebSocket server + Redis pub/sub + Socket.io cluster + load balancer + real-time DB. One DO class replaces all five. Land Durable Objects on the room planner, then expand the conversation to KV (caching), R2 (image storage), Workers AI (product recommendations). The room designer is the beachhead.

SE Talk Track

The customer says a room planner is a 6-month project: WebSocket server, Redis pub/sub, Socket.io cluster, load balancer, real-time DB. You say: one Durable Object per room. SQLite persists every furniture position and survives restarts. WebSocket Hibernation means 1,000 idle tabs cost $0/month — the DO sleeps and wakes in <5ms. The lock system (green = you hold it, red dashed = someone else does) prevents conflicts without any coordination service. The whole thing — WebSocket server, DB, pub/sub, lock manager, live cursors — is one TypeScript class, ~400 lines, deploy in under 2 minutes.

Demo Steps

1 Top-left dropdown: 3 pre-seeded rooms — Vardagsrum (Living Room), Sovrum (Bedroom), Hemmakontor (Home Office). Each is a separate DO instance. Switch rooms — state is independent.
2 Point at the presence strip (top-left coloured pills) — shows every connected user name, colour, and count. Updates live when anyone joins or leaves.
3 Point at the bottom Live Events bar — streams every event ("added KIVIK Sofa", user join/leave, room reset) across all tabs in real time. DO v{n} counter in the corner increments on every state change — proof of SQLite persistence.
4 Click the KIVIK sofa to select it (red outline). Drag it — the border turns green (you hold the lock). Other users see it turn red-dashed and cannot move it until you release.
5 With the sofa selected: press ↑↓←→ to nudge 0.25m. Hold Shift+Arrow to jump 1m. Press R or . to rotate 90°. Press Tab to cycle to the next piece. Press Escape to deselect.
6 Double-click any item to rotate it 90° in one action. Click a selected item — confirm dialog to remove it. Press Delete/Backspace to remove the selected item.
7 Open the bottom ＋ Add Furniture panel — 7 category tabs (Sofas / Bedroom / Storage / Office / Dining / Living / Lighting). Click any card to drop a new piece at room centre.
8 Press ↺ Reset — room snaps back to seed layout. The reset broadcasts to every connected tab simultaneously.
9 Press 3 or click 3D button — Three.js renders all furniture as recognisable multi-part shapes: sofa with backrest and arms, bed with mattress and headboard, desk with legs, chair with 5-star base, lamp with pole and shade.
10 Orbit: drag to rotate. Scroll to zoom. Right-drag to pan. Camera resets to fit the room on first load and on room switch.
11 Click a piece in 3D — amber wireframe bounding box highlights it. The ↕ Height bar appears. Drag slider to raise the piece (0–2m). Example: raise the HEKTAR lamp 0.74m to place it on the LISABO dining table.
12 Click ⛶ Expand — room designer fills the entire viewport. Click again to collapse. Three.js canvas resizes automatically.
13 Open a second browser tab (incognito) to the same URL. Both tabs show in the presence strip.
14 Drag the sofa in Tab 1 — watch it move in Tab 2 with sub-100ms latency. Live cursors show the other user's exact position.
15 Add furniture in Tab 2 — appears in Tab 1 immediately. Remove it — disappears from Tab 1. DO version counter increments in both tabs.
16 Key message: no origin DB hit, no Redis, no Socket.io server, no load balancer — one DO class handles everything.

Cloudflare Products

Durable ObjectsWebSocket Hibernation APISQLite in Durable ObjectsWebSocket API

Objection: "Real-time collaboration is a 6-month build" → The DO class is ~400 lines of TypeScript. WebSocket server, SQLite DB, pub/sub broadcast, furniture lock manager, live cursors — all in one file. Deploy time: under 2 minutes with wrangler deploy. No Redis cluster to provision, no Socket.io server to manage, no load balancer to configure, no real-time DB subscription to pay for.

🏠 HÖMSTYLE · E-commerce

Collaborative Room Designer

Place HÖMSTYLE furniture in a live 2D floor plan or 3D view. Every move syncs to all connected browsers in real time — no backend, no database, no load balancer. One Durable Object per room, SQLite for state, WebSocket Hibernation for zero idle cost.

The Problem

""We want a room planner on our product pages — customers return sofas because they can't visualise the fit. But our team scoped it as a 6-month project: real-time database, WebSocket server, Socket.io cluster, load balancer, Redis for pub/sub. We can't justify that for a planner.""

The Outcome

1 file

One Durable Object class handles WebSocket upgrades, SQLite furniture state, live cursors, and multi-user sync. No Redis. No Socket.io. No load balancer. 1,000 idle connections cost $0/month — the DO hibernates and wakes in under 5 ms.

Live demo below

Productionising this

What changes when you ship this for real

Hibernation = $0 idle

Use state.acceptWebSocket() (Hibernation API), NOT server.accept(). Hibernating sockets bill ~$0; active sockets bill duration. The /demo/room-designer DO uses Hibernation correctly.

SQLite size limits

Per-DO SQLite has a 10 GB cap. For furniture rooms this is fine; for chat or telemetry, partition by day/user/region across multiple DO instances.

Migrations

DO classes need explicit migrations in wrangler.toml — new_classes, new_sqlite_classes, deleted_classes. The room-designer DO has v-room-1 → v-room-2 migration as a worked example.

Backups

SQLite in DO is durable but not snapshotted by Cloudflare. For audit/compliance, periodically dump to R2 via storage.list() + serialise.

Auth

Don't leak roomId in URLs without auth. Sign room access tokens (JWT or KV-stored short-lived) so a stranger can't connect to vardagsrum just by guessing the path.

Observability

Each DO instance is a separate trace in Workers Logs. Tag log lines with roomId + doVersion so you can replay a specific room's history when debugging.