External Probe / Text Layout Engine
Pretext Field Lab
This state block is a readable control surface: the sigil shifts the frame's interpretive stance, the braces shift containment, and mode rotates the same lab between orientation, API, and rendered surface.
This is a small observatory for Pretext.js: edit one text sample, project it at several widths, and watch line breaks update without DOM measurement APIs.
import { prepare, layout } from '@chenglou/pretext'
const prepared = prepare(
'Hello, pretext.js — no reflow needed.',
'16px system-ui'
)
const { height, lineCount } = layout(prepared, 400, 24)
The lab below renders the lines returned by the library directly into visible surfaces. The useful idea is simple: prepare once, then reuse the handle as widths change.
This lab places the control surface directly adjacent to the simulated outputs. Keeping explanation and experiment in one field reduces cognitive load by minimizing eye travel and stabilizing attention.
Width labels, telemetry readouts, and named projections make the important change visible: what varies across phone, tablet, and poster is the layout outcome, not the source text.
Preset probes give the visitor a solvable example first, then the same surface opens into freeform text so experimentation can take over without changing tools.
Line Break Observatory
Edit the text, change the width, and watch the same prepared handle fan out across phone, tablet, and poster views.
Loading Pretext.js and waiting for fonts…
Probe Telemetry
- Prepare phase runs when text or whitespace mode changes.
- Layout phase reruns when widths change.
- Rendering shows the actual lines returned by the library.
Drag the handle or use the arrow keys to feel the 0ms reflow. Click any line to inspect its segments.
Why Explore It
The demo is small, but the pattern applies to places where layout stability matters before text is on screen.
Chat and stream surfaces
Predict bubble heights before text lands so scrolling and anchoring feel intentional.
Virtualized knowledge lists
Estimate paragraph heights without creating hidden DOM mirrors for every list item.
Multilingual interfaces
Use the same API for Latin, CJK, Arabic, Hebrew, Korean, and mixed-script text.
Responsive probes
Prepare once, then ask what the same text would do at phone, tablet, or desktop widths.
This page keeps the demo close to the site's software thread. The official playground remains the best place for exhaustive API exploration.