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

Basel Askar — Mon, 30 Mar 2026 14:35:57 +0000

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.

Google Stitch designs are now production-ready Next.js in seconds.

Basel Askar — Sun, 29 Mar 2026 00:00:47 +0000

HolyStitch compiles it into a full Next.js app in under 5 seconds.

No AI in the loop. No tokens. Pure compiler.

Stitch → React components → Tailwind theme → production ready.

What it handles:

→ Splits screens into named React components
→ Extracts your exact Tailwind theme
→ Deduplicates shared components across pages
→ Valid JSX — className, styles, icon fonts, 'use client' all handled

Runs as an MCP tool in Claude Desktop, Cursor, Windsurf

GitHub: github.com/BaselAshraf81/holystitch

Forem: Basel Askar

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

Google Stitch designs are now production-ready Next.js in seconds.