Collaborative Code Editor (VS Code Live Share)#

Problem statement (interviewer prompt)

Design a collaborative code editor (VS Code Live Share / CodeSandbox multiplayer). Multiple users edit the same source files, share a terminal + debugger, and follow each other's cursors. Support large files (100k+ lines), syntax highlighting, and IDE integrations.

flowchart LR
  H[Host]
  G[Guests]
  SIG[Signaling]
  RT([Realtime relay])
  H --> SIG --> G
  H <--> RT
  G <--> RT

    classDef client fill:#dbeafe,stroke:#1e40af,stroke-width:1px,color:#0f172a;
    classDef edge fill:#cffafe,stroke:#0e7490,stroke-width:1px,color:#0f172a;
    classDef service fill:#fef3c7,stroke:#92400e,stroke-width:1px,color:#0f172a;
    classDef datastore fill:#fee2e2,stroke:#991b1b,stroke-width:1px,color:#0f172a;
    classDef cache fill:#fed7aa,stroke:#9a3412,stroke-width:1px,color:#0f172a;
    classDef queue fill:#ede9fe,stroke:#5b21b6,stroke-width:1px,color:#0f172a;
    classDef compute fill:#d1fae5,stroke:#065f46,stroke-width:1px,color:#0f172a;
    classDef storage fill:#e5e7eb,stroke:#374151,stroke-width:1px,color:#0f172a;
    classDef external fill:#fce7f3,stroke:#9d174d,stroke-width:1px,color:#0f172a;
    classDef obs fill:#f3e8ff,stroke:#6b21a8,stroke-width:1px,color:#0f172a;
    class H,G,SIG service;
    class RT compute;

flowchart TB
  subgraph Roles
    HOST[Host IDE / workspace]
    GUEST[Guest IDE]
  end

  subgraph Signaling[Signaling & session]
    SIG[Signaling Service]
    ROOM[Session / room registry]
    INV[Invite tokens]
    AUTH[AuthN]
  end

  subgraph Realtime[Realtime channel]
    P2P[WebRTC peer-to-peer if possible]
    RELAY([Relay server fallback])
    OT[Operational transform of edits]
    CURS[Cursor + selection]
    PRES[Presence]
  end

  subgraph FileSync[File sync]
    DIFF[Diff / patch]
    OPEN_FILES[Open files state]
    SHARED_TERM[Shared terminal]
    DEBUG[Shared debug session]
  end

  subgraph Lang
    LSP[Language server proxy on host]
    DEFS[Go-to-definition, refs]
    HOVER[Hover docs]
  end

  subgraph Security
    SANDBOX[Restricted FS visibility]
    PERM[Read-only / write tiers]
    AUDIT[Audit log]
  end

  Roles --> Signaling --> Realtime
  Realtime --> FileSync
  Realtime --> Lang
  Security --- Realtime

    classDef client fill:#dbeafe,stroke:#1e40af,stroke-width:1px,color:#0f172a;
    classDef edge fill:#cffafe,stroke:#0e7490,stroke-width:1px,color:#0f172a;
    classDef service fill:#fef3c7,stroke:#92400e,stroke-width:1px,color:#0f172a;
    classDef datastore fill:#fee2e2,stroke:#991b1b,stroke-width:1px,color:#0f172a;
    classDef cache fill:#fed7aa,stroke:#9a3412,stroke-width:1px,color:#0f172a;
    classDef queue fill:#ede9fe,stroke:#5b21b6,stroke-width:1px,color:#0f172a;
    classDef compute fill:#d1fae5,stroke:#065f46,stroke-width:1px,color:#0f172a;
    classDef storage fill:#e5e7eb,stroke:#374151,stroke-width:1px,color:#0f172a;
    classDef external fill:#fce7f3,stroke:#9d174d,stroke-width:1px,color:#0f172a;
    classDef obs fill:#f3e8ff,stroke:#6b21a8,stroke-width:1px,color:#0f172a;
    class HOST,GUEST,SIG,ROOM,INV,AUTH,P2P,OT,CURS,PRES,DIFF,OPEN_FILES,SHARED_TERM,DEBUG,LSP,DEFS,HOVER,SANDBOX,PERM service;
    class RELAY compute;
    class AUDIT obs;

Glossary & fundamentals#

Concepts referenced in this design. Each row links to its canonical page; the tag column shows whether it is a high-level (HLD) or low-level (LLD) concept.

Tag	Concept	What it is	Page
`LLD`	Async models	futures / async-await / coroutines / actors	async-models
`LLD`	Structural patterns	Adapter, Decorator, Facade, Proxy, Composite	structural-patterns

Quick reference#

Functional#

Live share IDE session: host + guests edit / debug.
Shared terminal, debugger, ports.
Language server intelligence shared.
Read-only / write modes.

Non-functional#

Sub-200 ms edit echo.
Survive network glitches without losing edits.
Host security: limit visible FS.

Trade-offs#

P2P over relay: P2P best latency but NAT issues.
OT vs CRDT for text: same trade-offs as Docs.
Host as authority simplifies file system semantics.

Refs#

VS Code Live Share docs + RFC.
"How Live Share Works" Microsoft devblogs.
Yjs collaborative editing demos.

FAQ#

How does a collaborative code editor work?#

Edits are converted into operations, broadcast over WebSocket through a relay, and merged on every peer using CRDT or OT so concurrent edits converge to the same document.

CRDT vs OT for collaborative editing?#

CRDTs merge offline and peer-to-peer without a central server because operations commute. OT needs a server to transform ops in order but produces tighter, smaller payloads for large documents.

Each peer publishes an ephemeral presence message with cursor position and selection range over the same realtime channel. These are not stored, only broadcast to active session members.

How do you handle very large files (100k lines)?#

Chunk the document into blocks and only sync the visible window plus a buffer. Run syntax highlighting incrementally and lazy-load distant chunks on scroll.

The host streams pseudo-tty bytes to the relay and guests render them. Input keystrokes from guests are forwarded back to the host's pty, with optional read-only mode.

Google Docs: OT-based collaborative editor
Figma: CRDT-based collaborative editor
Notion: block-based collaborative editor
CRDTs: the conflict-free primitive

Video walkthrough

Design Real-time Collaborative Text Editor (Google Docs / Notion) : via System Design Walkthrough