A real-time collaborative code editor that enables multiple developers to write, edit, and run code together in the browser. Built with conflict-free replicated data types (CRDTs) for seamless synchronization across all connected clients.
resonyx.mp4
Resonyx provides a shared coding workspace where multiple users can simultaneously edit files, see each other's cursors, and execute code all within a single browser tab. It uses Yjs, a CRDT-based framework, to handle conflict resolution and state synchronization in real time over WebSockets.
- Real-time collaborative editing -- multiple users can edit the same file simultaneously with automatic conflict resolution.
- Presence awareness -- see who is online and which file each collaborator is currently editing.
- Monaco Editor -- full-featured code editor (the same engine that powers VS Code) with syntax highlighting, IntelliSense, and minimap.
- Virtual file system -- create, rename, and delete files and folders, all synchronized across clients.
- In-browser code execution -- run JavaScript and other supported languages directly from the editor.
Clients (Browser) Server (Node.js)
+-----------------+ +---------------------+
| React + Monaco | <-------> | Express + Socket.IO |
| Yjs (CRDT Doc) | WS/HTTP | YSocketIO (CRDT) |
+-----------------+ +---------------------+
The frontend maintains a local Yjs document and connects to the backend via a SocketIOProvider. All document mutations are propagated through the server using the y-socket.io protocol, which ensures eventual consistency without a central database.
| Technology | Purpose |
|---|---|
| React 19 | UI framework |
| Vite 7 | Build tooling and dev server |
| Monaco Editor | Code editor component |
| Yjs | CRDT document model |
| y-monaco | Monaco-to-Yjs binding |
| y-socket.io | Yjs synchronization over WebSockets |
| Technology | Purpose |
|---|---|
| Node.js 20 | Runtime environment |
| Express 5 | HTTP server and static file serving |
| Socket.IO 4 | WebSocket transport layer |
| y-socket.io | Yjs server-side synchronization |
git clone https://github.com/<your-username>/Resonyx.git
cd ResonyxInstall dependencies for both the frontend and backend:
cd Frontend
npm install
cd ../Backend
npm installcd Backend
npm run devThe server will start on http://localhost:3000.
In a separate terminal:
cd Frontend
npm run devOpen the application in multiple browser tabs or on different machines pointed at the same backend. Each participant enters a username and joins the shared workspace.
A multi-stage Dockerfile is included for production deployment. It builds the frontend, copies the output into the backend's public/ directory, and serves everything from a single Node.js process.
docker build -t resonyx .docker run -p 3000:3000 resonyxThe application will be available at http://localhost:3000.