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

PerformanceBeginner

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.

prepare()layout()

Try demo →

UI ComponentIntermediate

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.

walkLineRanges()layout()

Try demo →

InternationalizationBeginner

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.

prepare()layout()

Try demo →

// all pretext demos

PerformanceBeginner

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.

prepare()layout()

Try demo →

UI ComponentIntermediate

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.

walkLineRanges()layout()

Try demo →

InternationalizationBeginner

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.

prepare()layout()

Try demo →

UI ComponentBeginner

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.

prepare()layout()

Try demo →

Advanced LayoutAdvanced

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.

layoutNextLine()walkLineRanges()

Try demo →

CreativeAdvanced

Editorial Engine

Animated orbs with physics simulation. Text reflows around multiple moving obstacles in real time using interval arithmetic — zero DOM measurements per frame.

layoutNextLine()prepareWithSegments()

Try demo →

CreativeIntermediate

Typographic ASCII Art

Particle-driven ASCII art comparing proportional vs monospace typography. Pretext.js measures individual glyph widths to match characters to brightness levels.

prepareWithSegments()

Try demo →

// 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.

Animationby Tran Mau Tri Tam

Mesmerizing Text Animation

A hypnotic text animation that showcases the creative potential of Pretext.js — fluid motion and precise text layout combined.

Creativeby j an

Umbrella Text Reflow

Text dynamically reflows around a moving umbrella shape — a stunning UX concept combining Pretext.js layout with interactive design.

Gameby Ashley Best

Interactive Curling Rocks

A playful Pretext.js example with Rive scripting for interactive curling rocks — text layout meets physics-based animation.

Animationby hansonerere

Sand Writing Effect

Beautiful sand writing effect built with Rive — characters appear as if drawn in sand with realistic texture and animation.

Creativeby Danqi

Pool of Text

A mesmerizing pool of text that ripples and flows like water — satisfying fluid simulation meets Pretext.js text layout.

Creativeby Adam Fuhrer

Geometric Text Visualization

A striking geometric text visualization showcasing creative typography possibilities with Pretext.js layout engine.

UIby Andrea Giammarchi

60FPS Pretext Playground

A performance stress test of the Pretext playground pushing from 60FPS to its limits — demonstrating real-time text layout at scale.

UIby tldraw

tldraw × Pretext

tldraw integrating Pretext.js for instant text measurement in their collaborative whiteboard — smooth resizing and layout without DOM reflow.

Creativeby River Marchand

Illuminated Dragon

An illuminated dragon rendered with creative text layout — a playful, whimsical demo showing Pretext.js used for artistic typography effects.

Animationby Paweł Huryn

Text Flow Animation

Smooth text flow animation demonstrating dynamic reflow and layout transitions powered by Pretext.js.

Creativeby Amelia Wattenberger

Into the Rabbit Hole

A dreamy, starfield-style text animation — characters scattered like constellations, then drawn into a rabbit hole of typography.

Creativeby Robin

3D Object Text Wrap

Text wrapping seamlessly around a 3D gaussian splat object in real time — combining Pretext.js layout with 3D rendering.

Animationby dusha

Emotional Text Animation

A deeply expressive text animation that brings emotion to typography — characters move and transform with feeling.

UIby Robin

Real-Time Content Manipulation

Smooth real-time content manipulation in a practical interface — demonstrating how Pretext.js enables instant text reflow in production UIs.

Typographyby Cheng Lou

Knuth-Plass Line Breaking

The Knuth-Plass algorithm implemented with Pretext.js — optimized paragraph line breaking that reduces reading churn on long text blocks.

Creativeby Ben South

One-Shot Pretext Demos

Generating beautiful Pretext demos in one shot using Variant UI — showcasing how AI tools can rapidly produce text layout experiments.

Creativeby Wes Bos

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.

Animationby lotamchi

Magic with Pretext

Magical text effects built with Pretext.js — creative typography that transforms and animates with enchanting visual flair.

UIby Bitrig

Dynamic Text Reflow in Bitrig

Responsive and dynamic text reflowing now available in Bitrig — real-time layout adjustment powered by Pretext.js.

Gameby Alexander Chen

TypeBeat — Text Drum Machine

A drum machine made entirely out of text — TypeBeat combines Pretext.js with Gemini in Antigravity. Sound on!

Creativeby Adam Fuhrer

Morphing Text Shapes

Text morphing into organic shapes — another creative exploration of Pretext.js layout capabilities.

Creativeby Jayme Hoffman

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.

Creativeby Ken Goyarola

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.

Animationby Eduardo Sonnino

Text Screensaver

A mesmerizing text screensaver effect — characters float and drift across the screen in a relaxing, looping animation.

Creativeby Dhravya Shah

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.

Animationby Ashley Best

Rive Worm Text Reflow

A Rive animation drives Pretext.js text reflow — satisfying worm-like curves push text around in real time.

UIby Ann Nguyen

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.

Submit Your Demo →

by community

React Virtuoso Integration

Using Pretext.js with React Virtuoso for smooth virtual scrolling with accurate height estimation.

View project →

by community

Svelte Text Editor

A minimal Svelte-based text editor using Pretext.js for line-height calculation without DOM access.

View project →

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/pretext

Then 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.