Overview

This is a real-time collaborative code editor built using React, Monaco Editor, and Yjs. It allows multiple users to work on the same code file simultaneously, just like Google Docs for code. The synchronization is peer-to-peer using WebRTC, ensuring low latency collaboration without relying on a central server.

The project showcases how modern browser technologies and CRDTs (Conflict-free Replicated Data Types) can be combined to build seamless real-time applications.

Features

• Live collaborative editing with Yjs
• Code highlighting and IntelliSense via Monaco Editor
• Peer-to-peer synchronization using WebRTC
• User presence indicators (cursor, username)
• Fully client-side app built with Vite + TypeScript
• Beautiful and responsive UI using Tailwind CSS

System Design

At a high level, the editor uses Yjs to manage shared document state across clients. Y-webrtc is used as the provider for broadcasting updates using peer-to-peer connections. Monaco is integrated as the frontend editor, with changes mapped to Yjs’ CRDT structure.

High-Level Architecture

+------------+        WebRTC        +------------+
|  Browser A | <------------------> |  Browser B |
| (React UI) |                     | (React UI) |
| + Yjs Doc  |                     | + Yjs Doc  |
| + Monaco   |                     | + Monaco   |
+------------+                     +------------+

        ↳ Updates automatically synced via y-webrtc

- Each client maintains a Yjs document.
- Text changes in Monaco update the Yjs state.
- y-webrtc handles the peer discovery and syncing using WebRTC data channels.
- Optional STUN/TURN servers used for establishing connections behind NAT.