A hyper-collaborative, real-time development environment right in your browser. CodeCafé makes pair programming, teaching, and building web projects together as fluid and instant as sharing a thought.
Click here to watch the demo video!
We saw coding classes juggling tools built for essays, not engineers. Existing solutions felt clunky for the dynamic nature of real-time programming. CodeCafé was born from the need for a seamless, browser-based coding space designed from the ground up for true collaboration. Learn, teach, and build—together, instantly.
- Pixel-Perfect Live Preview: See your HTML, CSS, and JavaScript changes render instantly in an integrated Web View. What you code is what you see!
- True Real-Time Collaboration: Powered by Operational Transformation, multiple users can type in the same files simultaneously, with conflicts resolved seamlessly.
- VS Code Feel: Enjoy a familiar, rich editing experience (via Monaco Editor) with syntax highlighting, smart suggestions, and error checking.
- Zero Setup: Dive straight into coding. Everything runs in the browser.
- Frontend: React, TypeScript, Zustand (State Management), Tailwind CSS, Monaco Editor, Xterm.js (Integrated Terminal), Framer Motion, Axios, WebSocket Client
- Backend: Java Spring Boot, WebSocket API, Jackson (JSON Processing)
- Real-time Collaboration: Custom Operational Transformation (OT) Implementation
- State Management / Messaging: Redis (AWS ElastiCache) utilizing Lua Scripting for atomic operations
- Hosting: AWS EC2 (Backend), Vercel (Frontend), AWS ElastiCache (Redis)
At the heart of CodeCafé’s seamless collaborative editing is our custom-built Operational Transformation (OT) system, implemented on both the frontend and backend.
Operational Transformation is the technology that powers real-time collaborative editing in systems like Google Docs. It allows multiple users to simultaneously edit the same document by:
- Transforming operations (like insertions and deletions) to preserve user intentions
- Ensuring eventual consistency across all clients
- Resolving conflicts automatically when users edit the same regions of text
Our implementation handles the complex synchronization challenges of collaborative editing, including:
- Managing concurrent edits from multiple users
- Resolving edit conflicts deterministically
- Maintaining document consistency across all connected clients
- Preserving intention semantics of user operations
This enables truly fluid, Google Docs-like collaboration where everyone can type simultaneously without stepping on each other’s toes.
Prerequisites: Git, Java JDK 17+, Maven, Node.js 18+, npm 9+, Redis Server
Setup and Run:
backend/src/main/resources/application.properties
# Run the backend
cd backend
./mvnw install
./mvn
6 Comments
omneity
Great job, congrats for the release! A little feedback, it could be nice to auto-generate a unique url on page load (the one you generate after clicking on "share"). Bonus is that it gives the user a certain confidence to reload the page for example.
Side note, I am wondering if this could be used as a better way to collaborate with coding agents. "Pair with me" instead of the typical "Code for me".
n3storm
[flagged]
tpae
Question for you, how come you didn't use CDRT like yjs? It could simplify the codebase
nanna
I would love this for Emacs!
jasonjmcghee
Great project!
As you mentioned vscode- I don't believe the sharee needs an account unless that's changed. (And you can do it all in browser).
https://learn.microsoft.com/en-us/visualstudio/liveshare/qui…
But executing code is a different story. Replit works better there but it's heavily resource constrained in free tier.
indigodaddy
Does the preview work for dynamic server content eg python, nodejs, php etc?