cosmiciron

cosmiciron / prelayout

Public

Break the DOM speed barrier and say goodbye to layout thrashing: get text size, flow, shapes, and pages as data before you render. Powered by a smoking-fast, DTP-grade layout engine.

browser canvas dom-manipulation frontend-development javascript
17
0
100% credibility
Found Apr 30, 2026 at 17 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

Prelayout computes precise text positions, sizes, overflows, and pagination data before rendering for custom UIs like editors, previews, and shaped text.

How It Works

1
🔍 Discover precise text magic

You find a tool that figures out exactly where text goes in boxes, pages, or shapes before drawing anything.

2
📦 Add it to your project

You bring the tool into your work with a simple addition.

3
✨ Ask for text layout

You hand over your words, a box size, font choice, and any dodging shapes, and it instantly returns perfect positions and sizes for every line.

4
🎨 Draw your text

You paint the ready-made pieces exactly where they belong, in HTML, canvas, or your favorite spot.

5
🚀 Try fun examples

Play with live demos like text dancing around videos or flowing into images to see the magic in action.

✅ Smooth, speedy designs

Your layouts feel instant and perfect, no more guessing or slow redraws – everything flows beautifully.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 17 to 17 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 prelayout?

prelayout lets you compute text metrics, flow, shapes, and pagination as data before any DOM render, breaking the layout barrier and saying goodbye to thrashing. Drop in plain text or structured JSON via TypeScript APIs like form for fragments, fit for bounded regions, flow for multi-panel continuations, pour for shape interiors, produce for full pages, and exclusion for obstacles. It delivers positioned pieces with x/y/width/height/baseline ready to paint in canvas, SVG, or HTML, powered by a DTP-grade engine that needs browser canvas for measurements.

Why is it gaining traction?

It sidesteps DOM reflow loops for infinite feeds, masonry grids, or live editors, delivering sub-ms layouts even for 300+ page books. Demos like text dodging video silhouettes or image alphas show real-time flow without hacks, and serialized exclusions replay fast for animations. The 245 KiB bundle unpacks lean, with perf reports proving it's no toy.

Who should use this?

Frontend devs building selectable previews, paginated thumbnails, shaped readers, or chat timelines where precise text data before paint matters. Editorial tools needing source-mapped overlays, or generative UIs streaming cards without thrash. Avoid if you're Node-only sans canvas polyfills.

Verdict

Grab it for dynamic text UIs craving layout data upfront—demos and perf hook hard despite 17 stars and 1.0% credibility score signaling early days. Docs shine with copyable helpers, but watch for edge cases in prod; test your fonts and exclusions first.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.