Pretext Demo — Adopt the Web

DEMO 1

Live Height Prediction

Type or edit the text below. Pretext calculates the exact rendered height using pure math — no hidden DOM element, no getBoundingClientRect.

Text content

Container width: 400px

Font size: 16px

Line height: 24px

Predicted height —

Line count —

Computation time —

DEMO 2

Masonry Card Grid

Cards with variable text lengths laid out in a masonry grid. Pretext predicts each card's height so we can position them without measuring the DOM. Resize your window to see them reflow.

DEMO 3

Text Flow Around Images

Using layoutNextLine() to flow text around a floated image — each line gets a different available width depending on its vertical position.

DEMO 4

Shrink-Wrap & Balanced Text

Find the tightest container width that keeps the same line count — perfect "balanced text" without CSS hacks. Drag the slider to set the desired line count.

Target lines: 3

We build HVAC contractor websites that are designed to convert, not just look good. Fast load times, mobile-first layouts, click-to-call buttons, service area pages, and structured data that Google actually understands.

Optimal width —

Actual lines —

DEMO 5

Inline Objects in Text Flow

Animated pills, badges, and chips that live inside reflowing text. Each object is measured and placed using Pretext — drag the width slider and watch everything reflow together.

Container width: 700px

Animate objects

Objects placed —

Lines —

Frame time —

GET STARTED

Build with Pretext

Zero-reflow text measurement. Install from npm, deploy on Cloudflare. See the source on GitHub.