FlareStart
HomeNewsHow ToSources
FlareStart

Where developers start their day. All the tech news & tutorials that matter, in one place.

Quick Links

  • Home
  • News
  • Tutorials
  • Sources
  • Privacy Policy

Connect

© 2026 FlareStart. All rights reserved.

Back to articles
LayoutSans: Full 2D layout engine built on top of Pretext (flex, grid, magazine — zero DOM)
How-ToWeb Development

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

via Dev.toBasel Askar4h ago

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

Read Full Article
2 views

Related Articles

I have blogged about the difference between code coverage and test coverage and why it matters to distinguish between these 2.
How-To

I have blogged about the difference between code coverage and test coverage and why it matters to distinguish between these 2.

Dev.to Beginners • 5h ago

The origin story of Apple’s long-running relationship with FoxConn
How-To

The origin story of Apple’s long-running relationship with FoxConn

The Verge • 5h ago

Switzerland — Best Crypto Exchange (2026)
How-To

Switzerland — Best Crypto Exchange (2026)

Dev.to Beginners • 9h ago

Cursor Your Dream, Part 2: How to Move From First Prompt to First Working App
How-To

Cursor Your Dream, Part 2: How to Move From First Prompt to First Working App

Hackernoon • 15h ago

How-To

The Difference between `let`, `var` and `const`

Medium Programming • 18h ago

Discover More Articles