What is real-time collaborative editing?

Real-time collaborative editing allows multiple people to work on the same document simultaneously, with each person's changes instantly visible to everyone else. Early systems used Operational Transformation (OT) — a technique that reorders conflicting edits on the fly — but OT requires a central server to arbitrate every change. Modern systems like Yjs use Conflict-free Replicated Data Types (CRDTs): a mathematical framework where any two replicas can be merged in any order and always converge to the same result, without needing a central authority to decide who "wins".

CRDTs make offline editing natural: users can keep editing even when disconnected, and their changes merge cleanly when they reconnect. This is why real-time collaborative editors built on CRDTs feel instant — edits are applied locally first and synced to peers afterward, rather than waiting for a round-trip to a server before appearing on screen.

Tool description

The Collaborative Code Editor is a real-time multiplayer code editor powered by Yjs and CodeMirror 6. Share the room URL with your teammates and everyone in the room edits the same document together, with each person's cursor and selection shown in a labeled indicator.

The editor supports syntax highlighting for dozens of programming languages, selectable via a shared language dropdown — changing the language in one browser updates it for everyone in the room instantly. Files can be loaded from your local disk with the Open File button and downloaded back with Save File.

Features

  • Live multi-user cursors: Each collaborator's cursor and selection are shown with a color-coded, named label; multiple cursors at the same position are collapsed into a single "N users" indicator to reduce visual noise.
  • Shared language selection: The active programming language is persisted in the room so all participants always see the same syntax highlighting, and late joiners immediately get the correct state.
  • Open and save files locally: Load any source file from disk directly into the shared editor, or download the current document as a file with the correct extension.

How it works

When you join a room, the editor creates a Yjs document with a shared Y.Text node representing the file contents. Every keystroke is encoded as a compact binary Yjs update, serialized to Base64, and broadcast over a WebSocket room. All connected peers apply the update to their own replica; because of the CRDT guarantee, all replicas converge to the same text regardless of the order updates arrive.

Cursor and selection positions are shared through a lightweight Awareness layer that routes position data through the same WebSocket room. The full document state is debounced and written to persistent room storage every second, so users who join after the session started receive the current document immediately.

Options explained

  • Language dropdown — Selects the syntax highlighting language for the editor. The choice is broadcast to all room members so everyone sees consistent highlighting. The dropdown is disabled until you are connected to a room.
  • Open File — Opens a local file picker and loads the selected file's text content into the shared Yjs document, replacing the current contents for everyone in the room.
  • Save File — Downloads the current editor content as a file. The file extension is automatically chosen based on the selected language.
  • Theme — The editor follows your system dark/light preference (stored in localStorage). Toggle your OS or browser theme to switch between the VS Code–style dark and light editor themes.

Limitations

  • An active WebSocket connection to the relay server is required for syncing; if the connection drops, edits made offline will re-sync automatically when reconnected.
  • There is no persistent version history — once a session ends and the room is closed, the document is gone unless you saved it locally with the Save File button.
  • Binary files (images, compiled binaries, etc.) cannot be loaded; the editor works with plain-text source files only.
  • This tool is in beta; room stability and maximum concurrent users may be limited.

Tips

  • Share the full room URL from your browser's address bar to invite collaborators — the room ID is encoded in the URL.
  • Save a local copy with Save File at the end of a session; room data is not guaranteed to persist indefinitely.
  • If a collaborator's cursor label is covering important code, the label automatically flips to the left when near the right edge of the editor.