vite-pretext

Text that never jumps.

Measures text in a Web Worker before the browser paints — reserve its height to stop layout shift, shrink-wrap to content width, or style by line count. A Vite plugin; add one attribute.

See it in action ↓

Get started

npm i -D vite-pretext

// vite.config.ts
import { vitePretext } from 'vite-pretext';
export default { plugins: [vitePretext()] };

<p data-pretext>Long paragraph that reserves its height…</p>

Explore every mode →

See it in action

Press Start streaming below. Same content both sides — only the left opts in. Watch the WITHOUT column's unexpected shift climb while the left holds steady.

WITH

shift 0 px unexpected 0 px events 0 max 0 px

WITHOUT

shift 0 px unexpected 0 px events 0 max 0 px

Off the main thread

Reading offsetHeight after a write forces synchronous layout. Reading the pretext-cached min-height doesn't. The benchmark runs both and reports the fps speedup.