Design a spreadsheet frontend like Google Sheets
PremiumFrontend systemHard
- Canvas rendering
- Formula engine
- Dependency graph
Quick answer
This frontend system interview question asks you to design a spreadsheet frontend like Google Sheets. 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 spreadsheet like Google Sheets or Excel Online, with up to 1,000,000 cells, formulas and formatting. The hard part is rendering a mostly empty grid smoothly, recalculating formulas through a dependency graph fast enough to feel instant, and keeping a canvas grid accessible.
A sheet can have 10,000 rows x 100 columns, most of them empty. Users type values and formulas such as =SUM(A1:A100)*B2, select ranges, copy and paste, format cells (bold, number formats, fills), resize rows and columns, freeze panes and undo anything. Formulas recalculate when their inputs change.
What must a spreadsheet frontend like Google Sheets do?
- Grid: Scroll smoothly across 10,000 rows and 100 columns with row and column headers, frozen first row and column, and resizable sizes.
- Formulas: Cell references, ranges, arithmetic, and functions SUM, AVERAGE, IF, VLOOKUP, COUNTIF; errors such as #REF! and #DIV/0!; circular reference detection.
How well must it do it?
- Rendering: 60 fps scrolling; a change in one cell repaints within 16 ms.
- Recalculation: Changing one input of a chain of 10,000 dependent formulas recalculates in under 100 ms.
What scale should you design for?
Use these numbers in your estimates.
The scale numbers unlock with this questionUnlock
Key concepts
- Canvas rendering
- Formula engine
- Dependency graph
- Topological sort
- Sparse grid
- Virtualization
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 spreadsheet frontend like Google Sheets 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