Skip to content

Design a spreadsheet (frontend)

Design the web client for a spreadsheet: a large grid of cells people edit, formulas that update when the cells they use change, and copy and paste of a range.

System designFrontend and full stackCollaborationSenior

What to work through

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

  • Scroll and select across a large grid of cells with the mouse and the keyboard
  • Edit a cell, in columns that hold text, numbers, dates or true and false
  • Write formulas that update when the cells they use change
  • Copy and paste a range, and undo and redo

Constraints to discuss

  • Scrolling stays smooth across a sheet of a million cells
  • A keystroke shows within 200 milliseconds
  • A formula result updates within 100 milliseconds of an edit
  • Usable with a keyboard and a screen reader
Need a starting point?

Watch for these common gaps as you prepare:

  • Storing the sheet as a full two-dimensional array
  • Drawing every cell, or redrawing every visible cell on each change
  • Skipping the dependency map: a grid with no plan for formulas
  • An edge from a formula to every cell of a large range
  • Recomputing row and column positions on every render
  • Leaning on functions such as the current time that re-run on every change
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.