
LayoutSans: Full 2D layout engine built on top of Pretext (flex, grid, magazine — zero DOM)
Pretext solves text measurement without touching the DOM. I built LayoutSans as the next layer: it consumes Pretext's measurements and gives you complete flex, grid, magazine-style multi-column, and absolute layouts — all while keeping text nodes in the real DOM. This means you get accurate variable-height virtualization, dynamic layouts, and complex flows without layout thrashing, and without sacrificing accessibility, text selection, or find-in-page. Key points: Pure TypeScript, ~3.7 kB gzipped Works in browser, Node, Bun, Deno, Cloudflare Workers Flat output perfect for virtual lists and canvas-backed UIs Pretext is a peer dependency for text nodes 5-line example and benchmarks are in the README. Repo: https://github.com/BaselAshraf81/layout-sans npm: npm install layout-sans Would love feedback from anyone building virtualized UIs, chat interfaces, or editorial tools.
Continue reading on Dev.to
Opens in a new tab



