LayoutSans: Full 2D layout engine built on top of Pretext (flex, grid, magazine — zero DOM)

Source: Dev.to

Overview

Pretext solves text measurement without touching the DOM.

LayoutSans builds on top of Pretext: it consumes Pretext’s measurements and provides complete flex, grid, magazine‑style multi‑column, and absolute layouts while keeping text nodes in the real DOM.

This approach delivers:

• Accurate variable‑height virtualization
• Dynamic layouts and complex flows without layout thrashing
• Full accessibility, text selection, and find‑in‑page support

Features

• Pure TypeScript library (~3.7 kB gzipped)
• Works in browsers, Node, Bun, Deno, and Cloudflare Workers
• Flat output format, ideal for virtual lists and canvas‑backed UIs
• Requires Pretext as a peer dependency for handling text nodes

Getting Started

A 5‑line example and performance benchmarks are available in the repository’s README.

Call for Feedback

Feedback is welcome from anyone building virtualized UIs, chat interfaces, or editorial tools.