Real-Time Collaborative Markdown Editor

Project roadmap

1. 01

   Build the editor

   ~2h

   Create a React and TypeScript project with Vite. Add CodeMirror 6 with Markdown syntax highlighting, and a live preview next to it that renders Markdown safely (for example with markdown-it, without allowing raw HTML). Documents are opened by URL, such as /doc/meeting-notes. Done when: typing in the editor updates the preview.

2. 02

   Connect Yjs to the editor

   ~2h

   Create a Y.Doc with a Y.Text for the document, and bind it to CodeMirror with y-codemirror.next, so the editor's text is the shared text. To see the sync working before adding a server, connect two editors on the same page through their update events. Done when: typing in either editor appears in the other.

3. 03

   Build the WebSocket server

   ~2.5h

   Build a Node.js server (using the y-websocket server utilities or your own implementation with the ws package and y-protocols) that keeps one Y.Doc per document name, relays updates between everyone connected to it, and saves each document to disk or a database (with y-leveldb or by storing encoded updates), loading it again after a restart. Done when: two browsers on the same URL edit together, and the document survives a server restart.

4. 04

   Show who is editing

   ~2h

   Use the Yjs awareness protocol to share each user's name, color and cursor position. Show other people's cursors and selections in the editor with their name, and a list of who is online. Ask for a name on first visit and remember it in localStorage. Done when: each browser shows the others' cursors moving as they type.

5. 05

   Support offline editing

   ~2h

   Store the document in the browser with y-indexeddb, so it opens without a connection and keeps offline edits. Show the connection status. When the connection returns, the provider syncs automatically. Test it: edit the same paragraph in two browsers while both are offline, then reconnect. Done when: offline edits from both browsers merge into the same text after reconnecting.

6. 06

   Add limits and access

   ~1.5h

   Limit the document size and the number of connections per document on the server. Protect documents with a simple shared secret in the link (a random token), refusing WebSocket connections without it. Log connections and saves. Done when: a document can't be opened without its token, and oversized updates are rejected.

7. 07

   Test convergence

   ~2.5h

   Write a Node.js test that creates several Y.Doc clients connected to your server (on your own machine), applies thousands of random inserts and deletes from all of them at the same time, including clients that disconnect and reconnect, and then checks that every client ends with exactly the same text. Record how many clients and edits per second it handled. Done when: every run ends with identical documents on all clients.

Resources

• DocsYjs documentation
• Docsy-codemirror.next
• Docsy-websocket
• DocsCodeMirror 6 documentation
• ArticleCRDTs explained (crdt.tech)