Pretext.js Demos
Interactive Pretext demo pages showing Pretext.js in real scenarios — from virtual scrolling to creative typography. Each Pretext demo is a standalone interactive page you can experiment with.
// featured pretext demos
Variable-Height Virtual Scroll
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.
Tight Chat Bubbles
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.
Multilingual Content Feed
A social feed mixing Chinese, Arabic, Korean, and Latin text. Pretext.js measures every script accurately with the same API — no special-casing required.
// all pretext demos
Variable-Height Virtual Scroll
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.
Tight Chat Bubbles
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.
Multilingual Content Feed
A social feed mixing Chinese, Arabic, Korean, and Latin text. Pretext.js measures every script accurately with the same API — no special-casing required.
Accordion Heights
Expand and collapse sections whose text heights are calculated by Pretext.js. Smooth CSS transitions powered by accurate height prediction — zero layout shift.
Rich Inline Text
Mixed inline elements — body text, code spans, links, and chip badges — laid out together. Chips stay whole while text wraps naturally around them.
Editorial Engine
Animated orbs with physics simulation. Text reflows around multiple moving obstacles in real time using interval arithmetic — zero DOM measurements per frame.
Typographic ASCII Art
Particle-driven ASCII art comparing proportional vs monospace typography. Pretext.js measures individual glyph widths to match characters to brightness levels.
// community showcases
Video Showcases
Creative Pretext demo videos from the community. Click to watch the full video and learn how each Pretext demo project was built.
Mesmerizing Text Animation
A hypnotic text animation that showcases the creative potential of Pretext.js — fluid motion and precise text layout combined.
Umbrella Text Reflow
Text dynamically reflows around a moving umbrella shape — a stunning UX concept combining Pretext.js layout with interactive design.
Interactive Curling Rocks
A playful Pretext.js example with Rive scripting for interactive curling rocks — text layout meets physics-based animation.
Sand Writing Effect
Beautiful sand writing effect built with Rive — characters appear as if drawn in sand with realistic texture and animation.
Pool of Text
A mesmerizing pool of text that ripples and flows like water — satisfying fluid simulation meets Pretext.js text layout.
Geometric Text Visualization
A striking geometric text visualization showcasing creative typography possibilities with Pretext.js layout engine.
60FPS Pretext Playground
A performance stress test of the Pretext playground pushing from 60FPS to its limits — demonstrating real-time text layout at scale.
tldraw × Pretext
tldraw integrating Pretext.js for instant text measurement in their collaborative whiteboard — smooth resizing and layout without DOM reflow.
Illuminated Dragon
An illuminated dragon rendered with creative text layout — a playful, whimsical demo showing Pretext.js used for artistic typography effects.
Text Flow Animation
Smooth text flow animation demonstrating dynamic reflow and layout transitions powered by Pretext.js.
Into the Rabbit Hole
A dreamy, starfield-style text animation — characters scattered like constellations, then drawn into a rabbit hole of typography.
3D Object Text Wrap
Text wrapping seamlessly around a 3D gaussian splat object in real time — combining Pretext.js layout with 3D rendering.
Emotional Text Animation
A deeply expressive text animation that brings emotion to typography — characters move and transform with feeling.
Real-Time Content Manipulation
Smooth real-time content manipulation in a practical interface — demonstrating how Pretext.js enables instant text reflow in production UIs.
Knuth-Plass Line Breaking
The Knuth-Plass algorithm implemented with Pretext.js — optimized paragraph line breaking that reduces reading churn on long text blocks.
One-Shot Pretext Demos
Generating beautiful Pretext demos in one shot using Variant UI — showcasing how AI tools can rapidly produce text layout experiments.
Words on Your Face
A blog post except the words are on your face — Pretext.js text layout mapped onto facial features via webcam for a surreal reading experience.
Magic with Pretext
Magical text effects built with Pretext.js — creative typography that transforms and animates with enchanting visual flair.
Dynamic Text Reflow in Bitrig
Responsive and dynamic text reflowing now available in Bitrig — real-time layout adjustment powered by Pretext.js.
TypeBeat — Text Drum Machine
A drum machine made entirely out of text — TypeBeat combines Pretext.js with Gemini in Antigravity. Sound on!
Morphing Text Shapes
Text morphing into organic shapes — another creative exploration of Pretext.js layout capabilities.
Pretext Again — Daft Punk Edition
Listen to Fred again & Thomas Bangalter (ex Daft Punk) with Pretext.js — a musical text visualization built on a flight.
Fish & Fluid Text Simulation
Pretext.js meets three.js fluid simulation — text flows around swimming fish in a charming interactive demo built entirely on Replit.
Text Screensaver
A mesmerizing text screensaver effect — characters float and drift across the screen in a relaxing, looping animation.
Pretext + WebGL Rickroll
Someone had to do it — Pretext.js combined with WebGL to rickroll the internet. Never gonna give you up, rendered in text.
Rive Worm Text Reflow
A Rive animation drives Pretext.js text reflow — satisfying worm-like curves push text around in real time.
Chaotic Future Interfaces
The future of interfaces seems a little chaotic, but it's fun — experimental UI exploration with Pretext.js text layout.
// community
Built with Pretext.js
Pretext demo projects from the community. Submit yours to be featured here.
React Virtuoso Integration
Using Pretext.js with React Virtuoso for smooth virtual scrolling with accurate height estimation.
Svelte Text Editor
A minimal Svelte-based text editor using Pretext.js for line-height calculation without DOM access.
Your Pretext Demo Here
Built something with Pretext.js?
Submit it via GitHub.
What Is a Pretext Demo?
Each Pretext demo is a standalone interactive page that demonstrates how Pretext.js solves real-world text measurement problems. In every Pretext demo 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 Pretext demo pages show you the exact API calls and patterns to use.
All Pretext.js Demos
Variable-Height Virtual Scroll
Beginnerprepare()layout()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.
Tight Chat Bubbles
IntermediatewalkLineRanges()layout()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.
Multilingual Content Feed
Beginnerprepare()layout()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.
Accordion Heights
Beginnerprepare()layout()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.
Rich Inline Text
AdvancedlayoutNextLine()walkLineRanges()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.
Editorial Engine
AdvancedlayoutNextLine()prepareWithSegments()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.
Typographic ASCII Art
IntermediateprepareWithSegments()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.
Pretext Demo API Quick Reference
Every Pretext demo 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) |
Real-World Pretext Demo Use Cases
Virtual Scrolling & Infinite Lists
The most popular Pretext demo. Pre-compute heights for thousands of variable-height list items without creating DOM elements. This Pretext demo integrates with React Virtuoso, TanStack Virtual, or any virtualization library for buttery-smooth scrolling at 60fps.
Chat & Messaging Interfaces
The chat Pretext demo predicts 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.
Dashboards & Data Tables
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.
Responsive & Adaptive Layouts
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.
Creative Typography & Generative Art
The editorial Pretext demo shows text flowing around obstacles, magazine-style multi-column spreads, or ASCII art using precise glyph measurements. Each creative Pretext demo gives you per-line control that CSS alone cannot achieve.
Multilingual & Internationalized Content
The multilingual Pretext demo measures 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.
Getting Started with a Pretext Demo
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 every Pretext demo above to see these APIs in action.
Community & Contributing
Built something with Pretext.js? We'd love to feature your Pretext demo in our community gallery. Submit your demo by opening a GitHub issue with the title, URL, and a brief description. Community Pretext demo submissions appear in the gallery above after review.
You can also contribute a new Pretext demo by submitting a pull request to the pretextjs repository. Each Pretext demo 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.