CodeFiz is my 2022 proof that the real-time chops predate the AI wave: four collaborative surfaces in one browser room — a Monaco code editor, a shared whiteboard, a Quill doc, and Agora video — all synced over Socket.IO.
I built character-level Monaco sync across 16 Socket.IO channels: edits relay as insert/replace/delete ops carrying index and length, guarded by a randomized remoteSourceId to break echo loops. A remote code-execution service runs untrusted room code in three runtimes (Node, ts-node, Python) from a per-room temp file, with a 2–3s timeout and a per-room mutex blocking concurrent runs.
The hard part
Concurrent editing without OT or CRDT
Two people typing in the same Monaco buffer normally fight each other — local edits echo back as remote edits and cursors jump. Without reaching for a full OT or CRDT library, I relayed edits as index/length ops over Socket.IO and tagged each with a randomized remoteSourceId so a client ignores its own echoes, disposing and re-binding handlers on every file-tab switch. Not Google Docs — but it held up across JS, TS, and Python files in a live room.
Highlights
- Built character-level Monaco sync over 16 Socket.IO channels with insert/replace/delete ops and a randomized remoteSourceId to break echo loops.
- Wrote a remote code-execution service running untrusted code in 3 runtimes (Node, ts-node, Python) with a 2–3s timeout and a per-room mutex.
- Fixed simultaneous two-user whiteboard drawing by isolating cursor state in per-source closures and normalizing strokes to canvas fractions.
- Shipped Agora video end to end with an Express token server (RtcTokenBuilder, per-room token cache, TTL expiry).
- Synced 4 collaborative surfaces in one room, with a zero-backend demo on the landing page.
Stack