The Problem with Headless Layout
When rendering complex documents, virtualized data tables, or custom canvas user interfaces outside the standard DOM, developers face two main bottlenecks:
- The Browser DOM: Heavy memory footprints, synchronous reflow costs, and browser tab crashes when laying out 100,000 or more elements.
- WebAssembly Layout Engines (such as Meta's Yoga): Requires shipping over 300 kB of C++ binaries compiled to WebAssembly, incurring compilation cold-starts, JS-to-WASM bridge serialization delays, and zero native text interaction or accessibility tree support.
LayoutSans is a pure TypeScript flex and grid layout engine that takes a tree of boxes with styling rules and computes exact pixel bounding coordinates in sub-millisecond times with zero dependencies and no WebAssembly.
Performance Benchmarks
Layout time in milliseconds across tree sizes. LayoutSans runs 2 to 3 times faster than Meta's Yoga WASM while shipping 18 times less code.
| Tree Size | LayoutSans | Yoga (WASM) | Browser DOM |
|---|---|---|---|
| 100 boxes | 0.27 ms | 0.80 ms | 8.0 ms |
| 10,000 boxes | 4.82 ms | 8.0 ms | 800 ms |
| 100,000 rows (variable height) | 46 ms | 85 ms | crashes |
| Bundle Shipped | ~17 kB gz | 300+ kB gz | browser only |
measureText() calls in the hot path, and complete screen-reader accessibility.
Canvas Text Selection & Accessibility Tree
Version 0.2 added text interaction for canvas rendering. Integrated directly with Cheng Lou's pretext text measurement primitive, LayoutSans positions glyphs in advance and constructs a headless accessibility tree:
- Native Drag Selection & Clipboard: Dragging across canvas elements produces standard highlight rects and native clipboard text.
- Keyboard Navigation & Search: Supports Ctrl+F search jumping and tabbed focus rings.
- Screen Reader Tree: Uses a proxy virtual DOM maintaining 204 active accessibility nodes regardless of document length.