Interactive

Pretext Playground

Hands on demos powered by the real @chenglou/pretext library. Every layout below is computed in pure JavaScript with zero DOM measurements.

Shrink-Wrap Chat Bubbles
Shrink-Wrap Chat Bubbles
prepare + layout
Find the tightest width for multiline text. Compare CSS fit-content vs Pretext shrink-wrap.
Try it
Text Flow Around Obstacles
Text Flow Around Obstacles
layoutNextLine
Drag shapes and watch text reflow around them in real time with per-line width constraints.
Try it
Live Line-by-Line Layout
Live Line-by-Line Layout
layoutWithLines
See exactly how Pretext breaks text into lines with measured widths and positions.
Try it
Reading Speed Checker
Reading Speed Checker
prepare + layout
RSVP word flashing with focal point alignment. Speed ramps up until you tap out.
Try it
Accordion Height Prediction
layoutWithLines
Predict exact pixel heights for smooth expand/collapse transitions, no DOM measurement needed.
Try it
Karaoke Teleprompter
layoutWithLines
Word-by-word highlighting with precise positioning. Adjustable speed with auto-scroll.
Try it
Text Justify Comparison
layoutWithLines
Left aligned vs CSS justify vs Pretext justify, with river detection highlighting.
Try it
Rich Inline Layout
prepareWithSegments
Mixed text, code spans, and pill badges. Each segment measured for exact width.
Try it
Typographic ASCII Art
Typographic ASCII Art
prepare + layout
Your text shaped into patterns using proportional font character widths.
Try it
Text Masonry Grid
layoutWithLines
Cards with predicted heights for a perfect masonry layout. No DOM measurement, no layout thrashing.
Try it
Text Tetris
prepare + layoutWithLines
Tetris with proportional width columns. Character widths measured by pretext shape the game board.
Try it
Dragon Text Reflow
Dragon Text Reflow
layoutNextLine
Text flows around an animated multi-segment dragon. Per-line widths recalculate every frame.
Try it
Animated Typography
Animated Typography
layoutWithLines
Smooth width and font size transitions with instant layout recalculation on every frame.
Try it