Design a Real-Time Collaborative Document Editor with Concurrent Edits
xAIFrontend Engineer · Onsite
Last updated
A system design question for a frontend engineer: design a collaborative document editor where several people edit the same document at once and see each other's changes in near real time. It tests conflict resolution for concurrent edits, client-side state, the sync protocol, persistence and presence.
Design a collaborative document editor: several people open the same document, edit it at the same time, and see each other's changes in near real time. The interview is for a frontend engineer, so cover the client (how the editor models the document, applies local and remote edits, and shows other people's activity) as well as the backend that synchronizes edits between clients.
Constraints and Clarifications
- Concurrent edits from different users must not be lost, and every client must end up with the same document once edits stop.
- A user's own typing must appear immediately, without waiting for a round trip to the server.
Clarifying Questions
- Plain text or rich text (formatting, lists, tables, embedded objects)?
- How many people edit one document at the same time, and how many documents are active at once?
- Must editing work offline and merge when the user reconnects?
- Which presence features are required: live cursors, selections, a list of who is viewing?
- Is version history or restoring an earlier version required?
- Which permission levels exist, for example view, comment and edit?
Hints
Hint 1
Two edits at once: Take two users who edit the same sentence at the same moment, starting from the same text. Decide what each of them should see afterwards, and what information you need so that both end up with the same document.
Hint 2
The first frame after a keystroke: Decide what the user sees on their own screen the instant they type, before the server has heard about the edit, and what has to happen when the server's view arrives.
Follow-up questions
- Operational transformation or CRDTs: which would you choose for this product, and what would change on the client and on the server?
- A user edits offline for an hour and then reconnects. Walk through what happens.
- How should undo behave when other people have edited the same region since your change?
- One document suddenly has hundreds of simultaneous editors. What breaks first, and how do you handle it?
Solution walkthrough is for members
Get the full walkthrough with reference code and complexity analysis, plus Kitty Coach at 300 messages a day. Hints, the code runner and community answers stay free.