DEV Community

Basel Askar
Basel Askar

Posted on

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.

Top comments (0)