Design Google Docs

Advanced60 minBuilds Collaborative Document Editor (Google Docs)Read first: 4.4 Polling, SSE and WebSockets, 12.3 Delivery and ordering, 16.3 Consistency and conflicts

STEP 1 OF 13

The brief

You are designing a collaborative document editor like Google Docs. People open a document, type, and see everyone else's edits and cursors appear as they happen. Two people can type in the same sentence at the same moment, and both of their changes must survive. When everyone stops typing, every screen must show exactly the same document.

How big it is

Edit messages (operations) at peak: 4,000 / second
Document opens: 2,000 / second
Edit size: about 200 bytes
p99 goal: under 200 ms

Clients don't send every keystroke on its own. They batch what the user typed in the last few hundred milliseconds into one operation, such as "insert 'hello' at position 120".

What makes collaborative editing tricky

Typing must feel instant. The editor can't wait for a server round trip before showing a letter.
Concurrent edits conflict. If two people edit the same spot, applying their changes naively gives different results on different screens.
Nothing acknowledged may be lost. If a server crashes, every edit the user saw saved must still be there.
Many small writes. Saving the whole document on every edit is far too expensive.

All changes saved

0 components · 0 connections

A blank canvas. A better system.

Add components from the palette, then drag between them to connect the request and event flow.

React Flow

Design Google Docs

Advanced60 minBuilds Collaborative Document Editor (Google Docs)Read first: 4.4 Polling, SSE and WebSockets, 12.3 Delivery and ordering, 16.3 Consistency and conflicts

STEP 1 OF 13

The brief

How big it is

Edit messages (operations) at peak: 4,000 / second
Document opens: 2,000 / second
Edit size: about 200 bytes
p99 goal: under 200 ms

Clients don't send every keystroke on its own. They batch what the user typed in the last few hundred milliseconds into one operation, such as "insert 'hello' at position 120".

What makes collaborative editing tricky

Typing must feel instant. The editor can't wait for a server round trip before showing a letter.
Concurrent edits conflict. If two people edit the same spot, applying their changes naively gives different results on different screens.
Nothing acknowledged may be lost. If a server crashes, every edit the user saw saved must still be there.
Many small writes. Saving the whole document on every edit is far too expensive.

All changes saved

0 components · 0 connections

A blank canvas. A better system.

Add components from the palette, then drag between them to connect the request and event flow.

React Flow