SyncSpace
A multiplayer code editor where every keystroke, cursor and chat message syncs live — and the code actually runs in the browser.
What it is.
SyncSpace puts multiple developers in one editor, live. Each room is a Socket.IO namespace; each keystroke is a change event that every client applies through CodeMirror 6's collaborative editing, complete with named cursors and remote selections.
Alongside the editor sit a room chat and a sandboxed in-browser runner for JavaScript, TypeScript and JSX — so a team can talk, type and test without leaving the tab.
SyncSpace
Multi-cursor editing, chat & in-browser executionProblems worth solving.
- Concurrent edits without clobbering — two people typing on the same line must converge to the same document.
- Broadcasting cursors, selections and presence at keystroke frequency without flooding the socket.
- Running untrusted user code safely — the runner must never touch the host page's state.
- Keeping chat, editor and runner state coherent when a peer joins mid-session or drops offline.
Built in four moves.
Rooms as namespaces
Each collaboration room is a Socket.IO namespace — join, leave and presence are first-class socket events, not app-level bookkeeping.
Conflict-free editing
CodeMirror 6's collab extension transforms remote changes against local ones, so concurrent edits converge deterministically.
Presence & cursors
Named cursors and selections broadcast on a throttled channel — smooth multiplayer feel without melting the event loop.
Sandboxed execution
The runner transpiles TS/JSX and executes in an isolated worker — output streams back to the room without touching the host.
What it does.
Live multi-cursor
See every collaborator's cursor and selection with their name attached.
Conflict-free sync
Concurrent edits converge — no lost keystrokes, no merge dialogs.
Room chat
A per-room chat sidebar synced over the same socket connection.
In-browser runner
Run js, ts and jsx with streamed stdout — no install, no setup.
Presence awareness
See who is online in the room and what they are working on.
Late-join sync
Join mid-session and get the full document state instantly.
How it fits together.
- Socket.IO over raw WebSockets — rooms, reconnection and fallbacks come for free.
- CodeMirror 6 over Monaco — first-class collaborative editing primitives and a lighter bundle.
- Worker-isolated execution — user code runs away from the DOM and the host page's memory.
What it proved.
- Let a proven CRDT-style transform layer do the conflict resolution — hand-rolling merge logic is a trap.
- Throttle presence traffic, never document traffic — cursors can lag a frame, code cannot.
- Typed socket contracts across client and server made the realtime surface debuggable instead of mysterious.