PetrGuan

PetrGuan / Prelayout

Public

Component-level height prediction for virtual scroll lists. Built on Pretext.

45
0
100% credibility
Found Apr 08, 2026 at 45 stars -- GitGems finds repos before they trend. Get early access to the next one.
Sign Up Free
AI Analysis
TypeScript
AI Summary

Prelayout predicts exact heights for items in long scrolling lists like chats or feeds using a simple description of their layout, enabling smooth performance without trial-and-error rendering.

How It Works

1
🖥️ Discover smooth scrolling demos

You stumble upon live examples of chat apps, comment feeds, and grids that scroll perfectly without any jumps or flickers.

2
🎮 Play in the interactive playground

Tweak text, tags, or images right there and watch the tool predict exact sizes instantly, matching what you see perfectly.

3
📝 Sketch your list item's layout

Simply outline the pieces like fixed headers, wrapping text, tags, or images using everyday descriptions.

4
📱 Add your real content

Drop in your messages, comments, or product details, and it measures everything once upfront.

5
⚡ Resize and get instant heights

No matter how you stretch the screen, heights update super fast with perfect accuracy every time.

🎉 Perfect scrolling lists come alive

Your app now scrolls smoothly with thousands of items, no lag, no surprises – just delightful user experience.

Sign up to see the full architecture

4 more

Sign Up Free

Star Growth

See how this repo grew from 45 to 45 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 predicts exact heights for virtual scroll lists at the component level, eliminating DOM measurements that cause scrollbar jumps and scroll-to-index inaccuracies. You define a schema describing your item's layout—padding, text blocks, images, tags—then prepare items once via canvas text metrics and compute heights with pure math on resizes. Built on Pretext in TypeScript, it delivers sub-pixel accuracy for multilingual text, flex-wrap tags, and conditionals.

Why is it gaining traction?

It slashes resize costs to ~0.5µs per item (100x faster than DOM), with 500/500 exact matches in tests across CJK, Arabic, emoji, and long words. Framework hooks for React Virtual, react-window, Vue, Svelte, and React Native make integration drop-in, while demos prove zero-flicker accordions, masonry, chats, and tables. Auto-calibration and CSS/Tailwind extraction keep schemas in sync with your styles.

Who should use this?

Frontend devs building perf-critical feeds, chats, or tables in React, Vue, Svelte, or React Native, where accurate heights upfront prevent janky scrolling. Ideal for dynamic lists with variable text/images/tags, like comment threads or product grids, but skip if your items have arbitrary HTML.

Verdict

Grab it for virtual lists needing instant, flicker-free heights—demos and hooks sell it hard. At 45 stars and 1.0% credibility, it's experimental with great docs but demands schema maintenance; test in prod shadows first.

(198 words)

Sign up to read the full AI review Sign Up Free

Similar repos coming soon.