Collaborative Code Pad

Project roadmap

1. 01

   Design the CRDT and sync protocol

   ~3h

   Study a simple sequence CRDT such as RGA: every character gets a unique id (a client id and a counter) and is inserted after a specific character id; deletions mark characters as deleted (tombstones) instead of removing them; concurrent inserts at the same place are ordered by id so every copy agrees. Write DESIGN.md with the operations, the ordering rule, and the sync protocol (clients send operations; the server stores and relays them, and sends missed operations after reconnecting). Done when: DESIGN.md explains the CRDT with worked examples of concurrent edits.

2. 02

   Implement the CRDT

   ~3h

   Implement the CRDT in plain JavaScript (or TypeScript), with no browser code: local insert and delete producing operations, applying remote operations (safely ignoring ones already applied, and waiting for operations that depend on ones not yet received), and getting the current text. Keep a fast lookup from id to position. Done when: unit tests show two copies applying the same operations in different orders end with identical text.

3. 03

   Connect it to a code editor

   ~2.5h

   Create a React app with Vite and a code editor (CodeMirror 6 with language highlighting). Turn the editor's changes into CRDT operations, and apply remote operations to the editor as changes without triggering new operations. Keep the local cursor in the right place when remote edits happen before it. Done when: two editors on the same page kept in sync through the CRDT stay identical while typing.

4. 04

   Sync through a Node.js server

   ~2.5h

   Build a Node.js WebSocket server (with the ws package) that keeps each document's operations in order, relays new ones to the other clients, stores them (in a file or SQLite), and on connect sends the operations a client hasn't seen yet. Limit operation and document sizes. Done when: two browsers editing the same document stay in sync, and the document survives a server restart.

5. 05

   Show presence and support offline edits

   ~2h

   Share each user's name, color and cursor position (as CRDT ids, so they stay correct as text changes) and show remote cursors in the editor. Keep a queue of local operations made while offline, stored in IndexedDB, and send them after reconnecting. Done when: remote cursors are shown correctly, and offline edits from two browsers merge after reconnecting.

6. 06

   Keep it fast

   ~1.5h

   Measure how the CRDT behaves with long documents and many tombstones, and improve the slow parts (for example grouping consecutive characters typed together into runs, and compacting tombstones everyone has seen). Record the before and after numbers in README.md. Done when: editing a 5,000-line document stays responsive, and README.md shows the measurements.

7. 07

   Test convergence

   ~2.5h

   Write a randomized test that simulates several clients making random inserts and deletes, delivering operations in random order with delays and duplicates, and checks every client ends with the same text. Add tests for the server's catch-up and for offline queues. Done when: the randomized test passes thousands of runs.

Resources

• ArticleCRDTs explained (crdt.tech)
• VideoMartin Kleppmann: CRDTs, the hard parts (video)
• DocsCodeMirror 6 documentation
• Docsws: Node.js WebSocket library
• DocsVite: getting started