BaselAshraf81

BaselAshraf81 / layout-sans

Public

Pure TypeScript 2D layout engine powered by Pretext. Flex, Grid, Magazine multi-column, and Absolute layouts — with zero DOM and zero WASM bloat. Pretext measures text. LayoutSans positions everything. 100k variable-height boxes at 120 fps. Works everywhere: Browser, Node, Bun, Deno, Workers. The natural next primitive after Pretext.

11
1
100% credibility
Found Mar 30, 2026 at 11 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

LayoutSans is a tiny JavaScript library that computes precise positions for flexbox, grid, and text layouts without a browser or DOM.

How It Works

1
🔍 Discover a smarter way to arrange UI

You hear about a tool that positions boxes, text, and grids super fast without needing a web browser, perfect for games, PDFs, or huge lists.

2
📦 Add it to your project

You easily include this lightweight tool in your JavaScript setup, ready to use anywhere JS runs.

3
✏️ Sketch your layout

You describe simple arrangements like rows of flexible boxes, columns of text, or magazine-style flows using everyday terms like width, gap, and flex.

4
⚡ Get instant positions

With one quick calculation, you receive exact pixel locations (x, y, width, height) for every element, handling thousands smoothly.

5
🖌️ Draw or render your design

You use those positions to paint on a canvas, build PDFs, or prepare server-side previews without any browser delays.

🚀 Smooth, fast results everywhere

Your UI feels buttery smooth at massive scales, freeing you from browser limits for custom apps and renders.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 11 to 11 stars Sign Up Free
Repurpose This Repo

Repurpose is a Pro feature

Generate ready-to-use prompts for X threads, LinkedIn posts, blog posts, YouTube scripts, and more -- with full repo context baked in.

Unlock Repurpose
AI-Generated Review

What is layout-sans?

LayoutSans is a pure TypeScript library for computing 2D layouts—Flex, Grid, multi-column magazine, and absolute positioning—without DOM or WASM overhead. You input a tree of boxes with sizing rules and optional text via Pretext integration; it outputs exact pixel positions as a flat array of records. This core JS pure TypeScript project runs anywhere JS does: browsers, Node, Bun, Deno, Workers, delivering layouts for canvas, PDF, or virtual rendering.

Why is it gaining traction?

It crushes DOM reflows and Yoga's 300kB WASM bloat, laying out 100k variable-height boxes in 46ms at 120fps, with a gzipped bundle under 5kB and zero async init. Universal compatibility and flat output make it a drop-in for virtual lists or server-side previews, outperforming alternatives in speed and portability as a pure TypeScript package.

Who should use this?

Canvas game devs needing smooth scrolling lists, PDF generators like those in Node apps, or Worker-based UIs avoiding DOM layout thrashing. Ideal for frontend teams building pure TypeScript projects for SSR previews, virtualized feeds, or non-browser renderers where perf matters.

Verdict

Promising early pure TypeScript library with excellent docs, runnable demos, and legit benchmarks, but low maturity at 11 stars and 1.0% credibility score means watch for v0.2 stability. Grab it if you need lightweight layout sans WASM—test the virtualization demo yourself.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.