Accordion
Expand/collapse sections with pre-calculated heights. No layout shift!
What is Pretext?
▼
Pretext is a high-performance library for measuring and laying out multiline text without ever touching the DOM. It uses the browser's font engine as ground truth, making layout blazingly fast and accurate.
Why avoid DOM measurements?
▼
Every time you call getBoundingClientRect() or similar, the browser must do a synchronous layout calculation. This is slow (especially in loops) and is the root cause of Cumulative Layout Shift (CLS). Pretext pre-computes everything so you never block the main thread.
What can you build with it?
▼
Virtualized lists, chat interfaces with tight bubbles, masonry layouts, text that flows around obstacles, editorial spreads, rich text editors, and anywhere you need to know text dimensions before rendering.
Chat Bubbles
Tight message bubbles that keep shape while minimizing wasted space.
Masonry Layout
Card grid with varying content heights, all pre-calculated.
Live Type Resizer
Watch text reflow in real-time as font size changes. Pretext calculates height instantly.
The quick brown fox jumps over the lazy dog. Pack my box with five dozen liquor jugs.
Bidirectional Text
Mixed RTL/LTR text with proper shaping.
Rich Text Layout
Inline chips, links, and code spans that wrap naturally.