The Pretext.js Playground is an interactive sandbox where you can experiment with every Pretext.js API in real time. Type or paste any text, adjust font settings, resize the container, and watch Pretext.js compute line breaks, heights, and line counts — all without a single DOM measurement. The playground runs entirely in your browser and demonstrates why Pretext.js is the fastest way to measure multiline text on the web.
The most common use case. Pretext.js calls layoutWithLines() to compute all line breaks at a fixed container width. You get the exact line count, total height, and the text content of each line — ready for rendering in a virtual scroll, chat interface, or any UI where text height matters.
The advanced mode. Pretext.js uses layoutNextLine() to lay out one line at a time with a different width for each line. Drag the obstacle to see text reflow around it in real time. This is the same technique used in the editorial engine demo — interval arithmetic subtracts blocked regions from each line's available width.
The lightweight mode. Pretext.js calls walkLineRanges() to iterate line boundaries without building text strings. This is useful when you only need line widths and cursor positions — for example, to binary-search the tightest container width that maintains a given line count.
Pretext.js splits text measurement into two phases. The prepare phase runs once: it segments the input text using Unicode rules, measures each segment's glyph width via the Canvas measureText() API, and caches the results. This typically takes 0.1–1ms depending on text length.
The layout phase is pure arithmetic. Given a container width and line height, Pretext.js walks the cached segment widths, tracks a running line total, and inserts breaks when the width is exceeded. No DOM access, no forced reflow, no layout thrashing. A single layout call takes ~0.001ms — fast enough to run thousands of times per frame.
The prepared handle is reusable across any number of container widths. Compute heights for mobile, tablet, and desktop from the same handle in three arithmetic operations. This is what makes Pretext.js ideal for responsive layouts, virtual scrolling, and real-time text reflow.
| Function | Purpose | Returns |
|---|---|---|
| prepare(text, font) | Segment and measure text. Opaque handle for layout(). | PreparedText |
| prepareWithSegments(text, font) | Like prepare(), but exposes segment data for advanced APIs. | PreparedTextWithSegments |
| layout(prepared, width, lineHeight) | Compute line count and total height. Pure arithmetic. | { lineCount, height } |
| layoutWithLines(prepared, width, lineHeight) | Like layout(), but also returns each line's text and width. | { lines, lineCount, height } |
| layoutNextLine(prepared, cursor, width) | Lay out one line at a time. Variable width per line. | LayoutLine | null |
| walkLineRanges(prepared, width, callback) | Iterate line boundaries without building strings. | lineCount |
| profilePrepare(text, font) | Measure preparation timing (analysis + measurement). | PrepareProfile |
| clearCache() | Clear internal glyph-width caches. | void |
Pre-compute heights for thousands of variable-height items without creating DOM elements. Works with React Virtuoso, TanStack Virtual, and any virtualization library.
Predict message bubble heights before they render. Eliminate layout shift during streaming AI responses. Tight-wrap bubbles to minimize wasted whitespace.
Measure line heights for code with mixed fonts (comments, strings, keywords). Support pre-wrap white-space mode for accurate tab and newline handling.
Compute text heights at multiple breakpoints from a single prepare() call. Mobile, tablet, and desktop — three arithmetic operations, zero reflows.
Size chart tooltips, data table cells, and card layouts without forced synchronous layout. Keep 60fps even with hundreds of visible text elements.
Measure CJK, Arabic, Hebrew, Thai, Korean, and mixed-script text with the same API. Unicode segmentation and bidirectional text handled automatically.
Pretext.js uses the same Canvas measureText() API that browsers use internally for glyph measurement. The results match what the browser would render for normal and pre-wrap white-space modes. Edge cases like ligatures and complex shaping are handled by the browser's own font engine.
Yes. Pass any CSS font string to prepare() — e.g., "16px Inter" or "bold 18px 'My Custom Font'". Make sure the font is loaded before calling prepare(). You can use document.fonts.ready to ensure fonts are available.
Pretext.js uses Intl.Segmenter for Unicode-aware text segmentation. CJK characters can break at any character boundary. Arabic and Hebrew text is handled with correct bidirectional rules. The same prepare() + layout() API works for all scripts.
The prepare() call measures glyph widths via Canvas and takes 0.1–1ms depending on text length. This is a one-time cost per text+font pair. After preparation, each layout() call is pure arithmetic and takes ~0.001ms — fast enough to call thousands of times per frame.
Yes. Pretext.js is framework-agnostic — it's a pure JavaScript library with no dependencies. Import prepare() and layout(), call them from any component or hook, and use the results to set heights, render lines, or drive virtualization.