Skip to content

Design a collaborative document editor (frontend)

Design the web client for a document several people edit at once: everyone's typing shows up for everyone, with their cursors, and nobody's work is lost.

System designFrontend and full stackCollaborationSeniorStaff

What to work through

Work through a collaborative document editor as a spoken system design interview. Start by clarifying the scope, sketch a working design and explain the trade-offs behind your choices.

  • Open a document and edit its text with several other people at the same time
  • See other people's edits appear as they type
  • See where each other person's cursor and selection are, with their name
  • Keep typing through a dropped connection and have the work saved when it returns
  • Undo and redo your own edits

Constraints to discuss

  • Your own keystroke shows within 200 milliseconds, whatever the connection
  • Everyone ends with the same document once edits stop
  • No edit is lost, whether made at the same moment as another or during a dropped connection
  • Up to 100 people can have a document open at once
Need a starting point?

Watch for these common gaps as you prepare:

  • Forgetting that a selection must survive edits made by others
  • Saving presence with the document
  • Treating it as a backend question and leaving the editor out
  • Undo that reverses another person's edit
  • Blocking typing while the connection is down
Read: Frontend system design interview questions, and who asks them

Why this question is in the collection

These sources connect the problem to company interview reports or preparation guides. They do not guarantee what a company will ask you.

Your next question

AI systemsDesign a ChatGPT-style chat (frontend)Search and autocompleteDesign an autocomplete search box (frontend)CollaborationDesign a calendar (frontend)Messaging and notificationsDesign a chat app (frontend)
Browse the collection
01

Pick a question

Read the brief and choose what you want to work on.

02

Talk it through

Explain your thinking. Respond to follow-ups. Draw when a design needs it.

03

Find your next improvement

Use the feedback from your interview to decide what to practice next.