Design prompt: collaborative editor (lite)

Send changes that know where they belong, keep presence apart, and keep what history needs.

Before you read: predict

In this lesson's whole-text save model, ExamHall's question-bank editor saves each question as one whole text, and the server keeps the last save it receives. Question 7 reads Wich curve shows demand? when two examiners open it on Monday. Amal corrects "Wich" to "Which" and saves at 09:05. Bo, offline on a train, adds " Explain in one sentence." at the end; his editor saves the question when he reconnects at 09:40.

What does question 7 read at 09:41?

The 30-second version

Every browser holds the whole document and sends changes, never whole texts. A change that names a plain position breaks when other text lands first. A CRDT such as Yjs merges changes in any order, offline ones included; OT needs one server to reorder them. Cursors travel apart, throttled. Old versions need deleted text kept.

Send changes that know where they belong, keep presence apart, and keep what history needs.

How it works

Step 1 of 13

Numbers first. How many edit one document at once, how long they stay offline, its size, how long history is kept, who may edit.

Analogy: Two lawyers marking up one draft contract on separate copies

At the law firms	In the editor
each lawyer marks up her own copy at once, never waiting for the other	local first (step 3)
an email saying insert a word after the fourth word of clause 4 goes wrong once the other has added a word earlier in that clause	positions move (step 4)
each mark records the words it follows and the lawyer's initials, so the paralegal can copy both sets onto one draft in any order and get the same text	a CRDT, no conflicts (steps 5–6)
a clerk through whose desk every mark must pass, who settles the one order both copies take them in	OT (step 7)
a call-chat line, on clause 7, never written into the draft and sent only now and then	awareness, throttled (steps 11–12)
a dated copy at each signing round; a clause already shredded cannot be copied later	history (step 13)

In real terms: a collaborative editor sends changes that know their neighbours, not texts or bare positions.

Breaks down when: the lawyers negotiate and keep one wording; a CRDT keeps both and leaves the choosing to whoever reads the merged text.

Contrasting case: a will drafted by one solicitor alone: one writer, one copy, so a whole-text save loses nothing.

Examples, run for real

4.1 ExamHall EXH-4590 → MR !4890: the release week's lost edits

ExamHall's pilot editor saved whole questions, and the server kept the last save (EXH-4590). MR !4890 moves the bank to Yjs: updates relayed and stored, offline ones stored locally (steps 3–6, 9).

4.1 model: 4 examiners, 6 questions, 40 edits over a 40-hour week (seed 4590), 4 of them made offline · Yjs 13.6.33
4.1 EXH-4590 pilot (whole-question saves, the last one kept): 9 of 40 edits missing from the bank
4.1 MR !4890 (Yjs updates relayed and stored, offline ones sent on reconnect): 0 of 40 missing · 4 laptops and the server hold the same 6 questions

The pilot showed no error: each lost edit was overwritten by a save from a copy that had never received it (step 2).

4.2 Proof domain, chat: a group's shared trip notes

Three friends' phones edit one Yjs note, each on a different line, offline; their updates then arrive in every possible order, each twice (steps 5–6).

4.2 model: one shared note on 3 phones, each adding to a different line offline · Yjs 13.6.33
4.2 delivery orders tried 6 · each update applied twice · distinct texts 1 · all 3 additions kept

Order and repeats change nothing: the phones agree once each holds every update.

4.3 The board for "Design a Google-Docs-like editor, lite version" (worked, not executed)

Typical question	Steps that answer it	Mechanism owner
"Design a Google-Docs-like editor, lite version."	1, 3, 9–13	this lesson; the round's phases: `fsd-radio-framework`
"Two users type at the same position offline. What happens on reconnect?"	5–6, 9	this lesson; reopening the socket: `fsd-realtime-transport`
"CRDT or OT: what would you choose, and why?"	4–8	this lesson; clocks and ordering: `ds-clocks-ordering`

Try it

Answer first, then check. Nothing is saved.

Question 1 of 7

On this lesson's plain-position model, ExamHall's first prototype synced plain operations, insert this text at position n, each with an id so a repeat is dropped. Question 12 reads Demand falls. on both examiners' laptops. Offline, Amal inserts " sharply" at position 12, before the full stop, and Bo inserts "Explain: " at position 0. Each laptop applies its own operation at once and the other's when it arrives; the relay forwards operations in the order it receives them, and Bo's reaches it first.

Once both operations have arrived, which laptops show Explain: Demand falls sharply.?

Question 2 of 7

A chat community's pinned message, Meetup moved to Friday., is a Yjs document. Offline, two moderators type at its very start, one character a second: Kai types "UPDATE: " and Lena, starting half a second after him, types "Note: ". Kai's phone reconnects and syncs first, then Lena's.

Which text can both phones show once both have synced?

Question 3 of 7

ExamHall's question bank is a Yjs document. Since Wednesday 7 January 2026 it has stored a Y.snapshot at the end of each Wednesday's review meeting, and at each meeting the examiners rewrite at least one word that the previous review's text showed. Garbage collection, on by default, was turned off on Wednesday 4 March, after that day's review.

Which reviews' texts can the bank restore exactly today, Friday 16 October?

Question 4 of 7

A streaming service's subtitle editor syncs through one server with operational transformation. Cue 12 reads We leave at dawn. at revision 4. Ana, on revision 4, inserts " tomorrow" at position 16, before the full stop. Before her operation arrives, the server applies revision 5: Ben's insert of "[whispers] " at position 0.

At which position does the server insert Ana's text?

Question 5 of 7

The interviewer says: "Design a Google-Docs-like editor, lite version, for ExamHall's question bank." The numbers you get when you ask: up to 21 examiners in one question at once; an examiner may work offline for up to 3 hours; a browser keeps up with at most 200 cursor messages a second; reviewers may read but not edit; every weekly review's version must be restorable for a year. In 20 minutes, write your board: the numbers, the document model, what travels on the channel, what happens offline and on reconnect, where cursors go and how often, who checks a reviewer's write, and how history is kept.

Then write your choices in the shape of design.template.mjs as my-design.mjs, and run the check.

Your answer (optional, stays on this page)

Question 6 of 7

Dee's laptop holds ExamHall's question bank as a Yjs document, one change per typed character. It last synced when it held all 50 of Amal's changes and the first 10 of Bo's. Since then Bo has made 20 more, and Cy, a new examiner, has uploaded 20 changes she made offline the week before that sync. Offline, Dee has made 7. On reconnect, the laptop and the server exchange state vectors, and the laptop's 7 reach the server first.

How many changes does the server send the laptop?

Question 7 of 7

In this lesson's relay model, a ticketing company's seat-map designer shows each designer's cursor to everyone editing the same stadium map. 13 designers have it open, each moving the cursor without pause. Each browser sends its own cursor at most once every 50 ms, and the server relays each cursor message to the other 12 open browsers.

At most how many cursor messages does one browser receive in a second?

Go deeper

Pro tip

Name a CRDT library (Yjs), say what it guarantees, then spend your minutes on offline, cursors and permissions. When: the interviewer asks the row's third question, CRDT or OT and why. Status: RAN on Yjs 13.6.33.

Source

No item is keyed on a source; every key is executed. Library behaviour is valid as of 2026-10-16 (Yjs 13.6.33).

Yjs docs, Introduction (the curriculum row's URL): https://docs.yjs.dev/ (yjs-home.txt). "Yjs is a high-performance CRDT for building collaborative applications that sync automatically." (step 5).
Yjs docs, Document Updates: https://docs.yjs.dev/api/document-updates (yjs-document-updates.txt). "Document updates are commutative, associative, and idempotent. This means that you can apply them in any order and multiple times." (steps 5–6); "A state vector describes the state of the local client. The remote client can use this to exchange only the missing differences." (step 9).
Yjs docs, Y.Doc: https://docs.yjs.dev/api/y.doc (yjs-ydoc.txt). "Set doc.gc = false to disable garbage collection and be able to restore old content." (step 13).
Yjs docs, Offline Support: https://docs.yjs.dev/getting-started/allowing-offline-editing (yjs-offline.txt). "Now every change is persisted to a local database." (step 9).
Yjs docs, Awareness: https://docs.yjs.dev/api/about-awareness (yjs-awareness.txt). "The awareness protocol implements a simple network agnostic CRDT that manages user status (who is online?) and propagate awareness information like cursor location, username, or email address." (step 11).
crdt.tech, About CRDTs (the curriculum row's URL): https://crdt.tech/ (crdt-tech.txt). "they do not assume the use of a single server" and "the algorithms used by Google Docs, Trello, and Figma, which require all communication between users to flow via a server." (steps 7–8).
Front End Interview Handbook, Front End System Design: https://www.frontendinterviewhandbook.com/front-end-system-design (fih-overview.txt). "Requirements exploration: Understand the problem thoroughly and determine the scope by asking a number of clarifying questions" (step 1).

Checked against the tools and docs as of 2026-10-16.

Predict first