Real-Time
Collaborative
Code Editor
A browser-based IDE where multiple developers edit the same file simultaneously — Operational Transformation keeps everyone in sync, Monaco handles the editing, and XTerm.js brings a real terminal into the browser.
Overview
Collaborative editing is hard. This project works through exactly why — and builds the machinery to solve it from scratch.
Started in January 2026 as an exploration of real-time systems design. The core challenge: two users type at the same position at the same millisecond — how do both edits survive without one overwriting the other? The answer is Operational Transformation, and this project implements it server-side over Socket.io rooms, paired with Monaco Editor for the editing surface and XTerm.js for an in-browser terminal.
Editor
Monaco Editor
VS Code-grade
Sync
Operational Transformation
Socket.io rooms
Terminal
XTerm.js
VT100 emulation
Status
Paused — Jan 2026
Image Coming Soon
Architecture
Six layers, one shared document
Client
React 19 SPA served by Vite. React Router 7 handles client-side routing between the editor view, file explorer, and terminal pane.
React + Vite
Editor
Monaco — the engine behind VS Code — provides syntax highlighting, multi-cursor editing, and an in-memory file model. Each open file is a Monaco model URI.
Monaco Editor
Transport
Bidirectional event stream between client and server. Each editing session lives in a Socket.io room. OT operations are emitted as events and applied in sequence.
Socket.io
OT Engine
Insert and delete operations are transformed against concurrent operations before being applied, ensuring all clients converge to the same document state regardless of network delay.
Operational Transformation
Terminal
A full VT100-compatible terminal rendered in the browser via XTerm.js with the FitAddon resizing to the panel. Input is streamed character-by-character to the server over a dedicated socket channel.
XTerm.js
Server
Stateless HTTP server on Express 5 with Socket.io mounted. Each connection gets a UUID. User state, command buffers, and room membership are held in memory.
Node.js + Express 5
Features
What it implements
Monaco Editor Integration
Full VS Code-grade editing in the browser — syntax highlighting across dozens of languages, multi-cursor support, and an in-memory file model that maps each open file to a Monaco model URI. Tab switching between files preserves cursor position and scroll state.
Operational Transformation
Concurrent edits from multiple users are resolved using Operational Transformation. Insert and delete operations are transformed against in-flight operations before application, so all clients converge to the same document without a central lock.
Integrated Terminal
XTerm.js renders a VT100-compatible terminal panel directly in the browser. Input is streamed character-by-character to the Node server over a dedicated socket channel, with backspace handling and carriage-return command dispatch implemented at the server.
Room-based Sessions
Each collaborative session is scoped to a Socket.io room identified by a UUID. Users join by sharing a room link — the server tracks membership and routes operations only to the correct participants.
File Structure System
A tree-view file explorer lets users create, rename, and delete files within the session. Each file maps to a Monaco model, so switching files in the tree instantly loads the correct document with its full edit history.
Real-time Presence
Connections and disconnections are tracked server-side via Socket.io events. A health endpoint exposes the current active connection count, and presence state is propagated to room participants as users join or leave.
Design Decisions
Why these choices
OT over CRDTs
Operational Transformation was chosen to understand the algorithmic fundamentals of collaborative editing. CRDTs offer better convergence guarantees in fully peer-to-peer settings, but OT's server-centric model maps cleanly onto a Socket.io room architecture and is easier to reason about at this scale.
Monaco over CodeMirror
Monaco's model API makes it straightforward to manage multiple open files as discrete model URIs, each with independent undo stacks. The VS Code parity also means the editing UX is immediately familiar to anyone with a modern dev workflow.
XTerm.js in-browser terminal
Rather than simulating a terminal with a textarea, XTerm.js renders a real VT100 emulator. Character-by-character streaming to the server keeps the input loop accurate and allows future integration with an actual shell process via node-pty.
Tech Stack
Frontend
- React 19
- TypeScript
- Vite 7
- Tailwind CSS 4
- React Router 7
Editor / Terminal
- Monaco Editor 0.55
- XTerm.js 6
- XTerm FitAddon
Real-time
- Socket.io 4.8 (client)
- Socket.io 4.8 (server)
- ws 8
Backend
- Node.js
- Express 5
- uuid 13