CollabOS is a powerful, real-time collaborative code editor built for developers to write, share, and collaborate on code seamlessly. It features a premium, glassmorphism-inspired UI with smooth animations and robust conflict-free synchronization.
Whether you are conducting a technical interview, pair programming with a colleague, or teaching a class, CollabOS provides an instant, setup-free environment to code together at light speed.
CollabOS goes beyond a simple synced text box. It includes a suite of differentiated features designed for real-world collaboration scenarios:
- Multi-File Workspace & Persistence: Create, rename, and manage files in a virtual tree that instantly syncs. All rooms and document states are persisted via SQLite — jump back in anytime from your personal Sessions Dashboard.
- Live Inline Blame & Activity Diffs: See exactly who wrote which line in real-time. If you step away, a "While you were away" diff summary shows you exactly what changed across all files.
- Room Modes (Pairing, Teaching, Interview): Instantly configure a room for equal access, broadcast-only teaching, or candidate interviews (featuring paste-blocking and hidden host notes).
- Spotlight & Presence: Force-spotlight yourself so all participants' viewports automatically follow your cursor across files, or "ping" a user to grab their attention.
- Code Execution: Run JavaScript, TypeScript, and Python code directly in the browser with a live terminal output, powered by a secure execution proxy.
- Inline Comments & Chat: Drop threaded comments directly on lines of code. Export the entire session summary as a Markdown PR ready for GitHub.
- Version History & Forks: Auto-checkpoints every 5 minutes with manual saves. Need to experiment? Fork any live session into a clean new room instantly.
- Public Embeds: Generate read-only, responsive iframe embeds of your live code to share publicly, which can be revoked by the host at any time.
- Private Scratchpad: A purely local, unsynced Monaco editor panel for drafting logic before bringing it into the collaborative space.
Frontend:
- React & Vite: Fast, modern frontend framework and build tool.
- Monaco Editor: The core editor engine that powers VS Code, providing a familiar and powerful typing experience.
- Tailwind CSS: Utility-first CSS framework used for the glassmorphism styling and responsive design.
- GSAP: Industry-standard animation library for smooth UI entrance transitions.
- Lucide React: Beautiful, consistent iconography.
Backend & Synchronization:
- Node.js & Express: Lightweight backend server.
- Socket.IO: Enables real-time, bidirectional WebSocket communication.
- Yjs & y-socket.io: Handles the heavy lifting of conflict-free replicated data types (CRDTs) to ensure all clients stay perfectly in sync without data loss.
- y-monaco: Binds the Yjs document state directly to the Monaco Editor instance.
To run CollabOS locally, you will need to start both the backend server and the frontend development server.
Open a terminal and navigate to the backend directory:
cd backend
npm install
npm run devThe backend server will start running on http://localhost:5000.
Open a second, separate terminal and navigate to the frontend directory:
cd frontend
npm install
npm run devThe frontend application will start running on http://localhost:5173.
- Open your browser and go to
http://localhost:5173. - Enter your name and optionally specify a Room ID (if left blank, a random one will be generated).
- Share the URL from your browser's address bar with a friend or colleague.
- Start coding together!
CollabOS relies on CRDTs (Conflict-free Replicated Data Types) via Yjs to manage state. Instead of constantly overwriting the entire document on the server, every keystroke is treated as a mathematical operation that is broadcasted via Socket.IO. The Yjs engine on each connected client merges these operations in real-time, ensuring that even if two people type on the same line at the exact same millisecond, the document remains perfectly consistent across all screens.