Command Palette

Search for a command to run...

Hectal
Back to the lesson: Topic 25.7 — Design a Collaborative Editor or Whiteboard
React · Example 2 of 2

Text: naive positions diverge, transformed operations converge

This is only the insert-against-insert case of OT, enough to see the idea. Real OT also transforms deletes, formatting and selections, and real systems use a tested library.

In a collaborative editor several people change one document at once, so clients send small operations instead of whole snapshots, and the system needs a rule (server ordering with OT, or CRDTs) that makes every screen end up the same, plus presence cursors, per-user undo and continuous autosave.

Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.

Ready for more? This phase has 5 hands-on exercises with automatic checks.

Practice questions

Write the code in the editor, run it, then open the model answer to compare.

01

Write transformInsertDelete(insert, del) for a delete { pos, length } that happened at the same time as an insert.

02

Add a third user to the whiteboard example who changes y, and show that all three changes survive with operations.

Explain it without notes

01

Why do collaborative apps send operations instead of snapshots?

02

Explain OT and CRDTs in simple terms and compare them.

03

How would you design conflict handling for a whiteboard?

04

How do presence cursors work, and why are they separate from the document?

05

How do undo and autosave work in a collaborative editor?

Text: naive positions diverge, transformed operations converge

Preview

Press Run to see the page.

Console

Nothing logged yet.

Expected console output

naive on Ravi: Hey H!ello
OT on Asha: Hey Hello! | OT on Ravi: Hey Hello!
same position: ARcat | ARcat