30% offEnding soon
FSD-022Frontend system design Premium

Design a Spreadsheet Grid

Design a browser spreadsheet with formulas, dependency-aware recalculation, ranges, clipboard transactions, virtualization, accessibility, and undo.

Advanced 58 min read

A browser spreadsheet is a document engine with a grid interface. The hard part is not drawing cells. It is keeping formulas, ranges, clipboard commands, history, and a virtualized viewport attached to the same logical workbook revision.

A small editable grid can store values in a two-dimensional array. That model breaks when a row is inserted, a formula references another sheet, a paste changes ten thousand cells, or a worker finishes an old calculation after the user has already typed again.

The design needs two kinds of truth. Canonical workbook state records raw cell input, structure, and revisions. Derived state records calculated values, dependency indexes, layout measurements, and the current render window. Derived state may be rebuilt. Canonical state must never depend on which cells happen to be mounted.

Clarify the spreadsheet product

Ask about workbook size, formula compatibility, imports, exports, collaboration, offline work, data types, protected ranges, charts, macros, and audit requirements. A product that only edits a 50 by 20 planning sheet needs a much smaller design than a browser replacement for Excel.

For this interview, assume multiple sheets, sparse cells, arithmetic and common aggregate formulas, rectangular selection, fill, copy and paste, undo and redo, frozen headers, and local-first editing with periodic server revisions. The grid may contain hundreds of thousands of logical cells, but only a bounded viewport is mounted.

Full Excel compatibility, macros, real-time collaboration, pivot tables, and chart authoring are separate extensions.

The public interview prompt

Design a reusable browser spreadsheet. Explain:

  • workbook, sheet, row, column, cell, formula, and range identity;
  • parsing, dependency tracking, dirty propagation, cycle detection, and worker recalculation;
  • editing, navigation, selection, clipboard conversion, fill, and atomic commands;
  • virtualization, measurement, frozen regions, focus, and screen-reader behavior;
  • undo, redo, persistence, autosave, revision conflicts, imports, and exports;
  • loading, calculating, invalid formula, circular reference, offline, and recovery states;
  • security, internationalization, performance budgets, observability, and testing;
  • simpler alternatives, rejected approaches, rollout, and interviewer follow-ups.

What the premium solution covers

The full solution builds a sparse workbook model, stable coordinates, parsed formula graph, reverse-dependency index, dirty-cell scheduler, worker revision protocol, range model, clipboard transaction, command history, and bounded rendering surface.

Original media follows one edit through transitive recalculation, separates stable cell identity from A1 display notation, shows a clipboard rectangle becoming one reversible command, and maps the workbook engine's ownership boundaries. Two deterministic labs exercise cycle detection and atomic paste, undo, and redo.

Premium solution

Continue with the complete system design

Unlock the architecture, state machine, API contracts, original diagrams, positioning model, accessibility decisions, performance budgets, testing plan, rollout strategy, scoring rubric, and interview walkthrough.

  • Detailed, beginner-friendly explanation
  • Production failure modes and trade-offs
  • Mobile-friendly architecture diagrams
  • Senior and staff-level interview signals
Unlock Premium

Frequently asked questions

What is the difference between a data table and a spreadsheet grid?
A data table presents records from a schema. A spreadsheet is a document whose cells can contain values or formulas, participate in arbitrary ranges, and change other cells through a dependency graph.
Should spreadsheet formulas run on the main browser thread?
Small calculations can, but a serious workbook should parse and recalculate in a worker. Publish results only when the worker revision still matches the current workbook revision.
How should a spreadsheet detect circular formulas?
Build dependencies from parsed formula references and use graph traversal or strongly connected components. Mark cells in a cycle with a stable error instead of recursively evaluating them.
How should copy and paste integrate with undo?
Parse and validate the full clipboard rectangle first, then apply it as one transaction containing reversible cell patches. One user paste should require one undo.
Can a spreadsheet virtualize cells and remain accessible?
Yes, but logical row and column counts, indices, focus, and selection must remain independent of mounted DOM nodes. Mount the target cell before assigning active focus.
What should identify a spreadsheet cell?
Use a stable sheet ID and stable row and column identities internally. A1 notation is a user-facing coordinate that must be translated when rows or columns are inserted.