Interactive demos showing Pretext.js in real scenarios — from virtual scrolling to creative typography. Each example is a standalone interactive page you can experiment with.
A masonry card grid where Pretext.js predicts every card height without DOM reads. Only visible cards are mounted — scroll through hundreds of items at 60fps.
Compare CSS max-width bubbles vs Pretext.js tight-wrapped bubbles. Binary search finds the minimum width that keeps the same line count, eliminating wasted space.
A social feed mixing Chinese, Arabic, Korean, and Latin text. Pretext.js measures every script accurately with the same API — no special-casing required.
A masonry card grid where Pretext.js predicts every card height without DOM reads. Only visible cards are mounted — scroll through hundreds of items at 60fps.
Compare CSS max-width bubbles vs Pretext.js tight-wrapped bubbles. Binary search finds the minimum width that keeps the same line count, eliminating wasted space.
A social feed mixing Chinese, Arabic, Korean, and Latin text. Pretext.js measures every script accurately with the same API — no special-casing required.
Expand and collapse sections whose text heights are calculated by Pretext.js. Smooth CSS transitions powered by accurate height prediction — zero layout shift.
Mixed inline elements — body text, code spans, links, and chip badges — laid out together. Chips stay whole while text wraps naturally around them.
Animated orbs with physics simulation. Text reflows around multiple moving obstacles in real time using interval arithmetic — zero DOM measurements per frame.
Particle-driven ASCII art comparing proportional vs monospace typography. Pretext.js measures individual glyph widths to match characters to brightness levels.
Examples from the community. Submit yours to be featured here.
Using Pretext.js with React Virtuoso for smooth virtual scrolling with accurate height estimation.
A minimal Svelte-based text editor using Pretext.js for line-height calculation without DOM access.
Built something with Pretext.js?
Submit it via GitHub.
These interactive examples demonstrate how Pretext.js solves real-world text measurement problems. Each example is a standalone page where you can adjust parameters, resize containers, and watch Pretext.js compute line breaks and heights in real time — all without a single DOM measurement. Whether you're building a virtual scroll, a chat interface, or a creative typography experiment, these examples show you the exact API calls and patterns to use.
A masonry card grid where Pretext.js predicts every card height without DOM reads. Only visible cards are mounted to the DOM — scroll through hundreds of items at 60fps with zero layout thrashing.
Use cases: Virtual scrolling lists, Pinterest-style masonry grids, infinite feeds with variable-height items.
Compare CSS max-width bubbles versus Pretext.js tight-wrapped bubbles. A binary search finds the minimum width that keeps the same line count, eliminating wasted whitespace in every message bubble.
Use cases: Chat applications, messaging interfaces, AI streaming responses, notification toasts.
A social feed mixing Chinese, Arabic, Korean, Thai, and Latin text in a single list. Pretext.js measures every script accurately with the same API — no special-casing, no locale hacks.
Use cases: Social media feeds, translation tools, multilingual CMS, internationalized dashboards.
Expand and collapse sections whose content heights are calculated by Pretext.js before the animation starts. Smooth CSS transitions with zero layout shift — the browser never needs to measure the expanded content.
Use cases: FAQ sections, settings panels, collapsible sidebars, documentation pages.
Mixed inline elements — body text, code spans, hyperlinks, and chip badges — laid out together on the same baseline. Chips stay whole during line breaks while text wraps naturally around them.
Use cases: Rich text editors, tag/mention systems, email composers, annotation tools.
Animated orbs with physics simulation floating over a text canvas. Text reflows around multiple moving circular obstacles in real time using interval arithmetic — zero DOM measurements per animation frame.
Use cases: Magazine-style layouts, creative typography, interactive articles, data visualization with text.
Particle-driven ASCII art that uses Pretext.js to measure individual character widths. Compare proportional versus monospace typography — the same characters produce different visual results depending on how accurately widths are measured.
Use cases: Creative coding, generative art, terminal emulators, retro-style visualizations.
Every Pretext.js example uses one or more of these core functions. The API is split into a preparation phase (measure glyph widths once) and a layout phase (pure arithmetic, runs in microseconds).
| Function | Phase | Used In |
|---|---|---|
| prepare(text, font) | Prepare | Virtual Scroll, Multilingual, Accordion |
| prepareWithSegments(text, font) | Prepare | Chat Bubbles, Rich Text, Editorial Engine, ASCII Art |
| layout(prepared, width, lineHeight) | Layout | Virtual Scroll, Chat Bubbles, Multilingual, Accordion |
| layoutWithLines(prepared, width, lineHeight) | Layout | Playground (uniform mode) |
| layoutNextLine(prepared, cursor, width) | Layout | Rich Text, Editorial Engine |
| walkLineRanges(prepared, width, callback) | Layout | Chat Bubbles, Rich Text, Playground (ranges mode) |
The most common Pretext.js use case. Pre-compute heights for thousands of variable-height list items without creating DOM elements. Integrate with React Virtuoso, TanStack Virtual, or any virtualization library for buttery-smooth scrolling at 60fps.
Predict message bubble heights before streaming AI responses finish rendering. Eliminate layout shift and jumpiness. Use tight-wrapping to minimize wasted whitespace in every bubble — especially important on mobile where screen width is limited.
Size chart tooltips, data table cells, and card layouts without forced synchronous reflow. When hundreds of text elements are visible simultaneously, Pretext.js keeps rendering at 60fps by avoiding the DOM measurement bottleneck entirely.
Compute text heights at multiple breakpoints from a single prepare() call. Mobile, tablet, and desktop — three arithmetic operations from the same handle, zero reflows. Perfect for server-side rendering where DOM measurement is impossible.
Build editorial layouts with text flowing around obstacles, magazine-style multi-column spreads, or ASCII art using precise glyph measurements. Pretext.js gives you per-line control that CSS alone cannot achieve.
Measure CJK, Arabic, Hebrew, Thai, Korean, and mixed-script text with the same two-function API. Unicode segmentation and bidirectional text are handled automatically — no locale-specific code required.
Install Pretext.js from npm with your package manager of choice:
$ npm install @chenglou/pretextThen import the two functions you need:
import { prepare, layout } from '@chenglou/pretext' // Prepare once — measures glyph widths via Canvas const prepared = prepare( 'Hello, Pretext.js!', '16px Inter' ) // Layout at any width — pure arithmetic const { height, lineCount } = layout( prepared, 400, // container width 24 // line height )
That's it. The prepare() call runs once per text+font pair. Every subsequent layout() call is pure arithmetic — no DOM access, no forced reflow, no layout thrashing. Explore the examples above to see these APIs in action.
Built something with Pretext.js? We'd love to feature it in our community gallery. Submit your example by opening a GitHub issue with the title, URL, and a brief description. Community examples appear in the gallery section above after review.
You can also contribute to the official examples by submitting a pull request to the pretextjs repository. Each example is a self-contained React component that dynamically imports the Pretext.js library and demonstrates a specific use case or API pattern.
For questions, bug reports, or feature requests about the Pretext.js library itself, visit the official pretext repository by chenglou.