Design a collaborative editor UI like Google Docs
PremiumFrontend systemHard
- CRDT
- Operational transformation
- Presence cursors
Quick answer
This frontend system interview question asks you to design a collaborative editor UI like Google Docs. Aim for a design that loads fast, stays responsive and is easy to maintain, then explain components, state, data fetching and trade-offs. Interviewers want to see how you structure the interface, manage state and keep the experience fast.
The problem
Design the frontend of a collaborative editor like Google Docs, where several people type in the same document and see each other's changes within a second. The hard part is making concurrent edits converge with OT or a CRDT, keeping named cursors in place, and merging edits made offline.
Each person sees the others' named cursors and selections. If one person loses connection for a minute and keeps typing, their edits merge in when they return. Undo must undo only your own changes.
What must a collaborative editor UI like Google Docs do?
- Concurrent editing: Two users typing in the same paragraph both see the final text with both insertions in the right places.
- Presence: Each collaborator's cursor and selection is shown with a name and colour and moves correctly when text before it changes.
How well must it do it?
- Convergence: All clients reach the same document after all operations are delivered, in any order.
- Latency: Local echo under 16 ms; remote edits visible within 300 ms of the sender's keystroke on a good network.
What scale should you design for?
Use these numbers in your estimates.
The scale numbers unlock with this questionUnlock
Key concepts
- CRDT
- Operational transformation
- Presence cursors
- WebSocket
- Offline editing
- Undo redo
How you’ll practise
- Requirements
- Components
- State and data
- Network and caching
- Performance and accessibility
- Wrap-up
Lala, personalized to you, gives a hint when you ask and reviews your design when you are ready.
What do interviewers look for?
In any frontend system design round.
- Starts from the user flows and the screens
- Splits the interface into clear components
- Decides where state lives and how it stays in sync
- Plans data fetching, caching and loading states
- Covers performance, accessibility and error states
- Explains how the design holds up on slow networks and small screens
Questions people ask about this interview question
- Which design type is this question?
- It is a frontend system question. You design a collaborative editor UI like Google Docs and explain your choices the way you would in an interview.
- Is this question asked at entry level?
- It is marked Hard. It suits engineers preparing for senior interviews, where you are expected to drive the discussion and go deep on trade-offs.
- What should I cover first?
- Start with the main user flows, the screens and the data each one needs. Agree on scope with the interviewer before you design anything.
- Can I practise it for free?
- It is a premium question. Sign up and unlock it once for 10 credits; it then stays unlocked. When you finish, Lala, your personalized AI mentor, can review your design for 30 credits.
Related questions
Updated · Written by the SevyDevy team