The 20,000,000-cell document

Google Sheets caps a spreadsheet at ten million cells. The document below holds twenty million — every cell formula-capable, editable, and reactive — in about 89 MB of browser memory. That is 4.7 bytes per cell, which is 8.5× below the cost of a plain { row, col, raw } object with no reactivity at all.

Under the floor. Fully reactive. Click the button and build it yourself:

The flyweight grid — 20,000,000 cellsLive · runs the shipped engine

20 columns × 1,000,000 rows, fully reactive at 4.7 bytes per cell. Nothing downloads until you click — the model code and the formula parser load on demand, then one more click creates all 20,000,000 cells in your browser.

Ground truth in columnar typed arrays, disposable cell facades per render, a sparse reactive overlay that materializes per observation and evicts with the viewport. ~55% real Excel-syntax formulas. Everything costs proportional to what's observed — never to what exists.

The trick is that there is no trick — only one invariant taken all the way down:

Everything costs proportional to what's observed; nothing costs proportional to what exists.

Ground truth lives in columnar typed arrays: one byte of kind tag, eight bytes of number, shared across the column. Cell objects are disposable three-field facades created per render and thrown away. Reactivity is a sparse overlay that materializes only when something observes a cell — and evicts when the viewport moves away. A write to a cell nobody is watching allocates nothing and notifies no one. Twenty million cells exist; only the few hundred you can see cost anything.

Development uses the same engine path as production. Editing the sheet model reconstructs its Vue owner, applying one complete class generation instead of running new behavior against an old 20M-cell instance.

The pattern is reusable, not a stunt: The Flyweight Pattern walks the architecture, and Reactive State teaches its foundation — keyed reactivity, the third state shape — in ten lines.