pretext: Finally, Text Measurement Without the Guesswork

I’ve been doing frontend work for years, and text measurement has always been one of those things that quietly drives me nuts. getBoundingClientRect()? Gotta wait for the DOM to render first. Canvas measureText()? Fine for single lines, but throw in word wrapping or complex layouts and you’re stuck.

Then I came across pretext by Cheng Lou (yes, the React team guy). 45K+ stars. That number alone made me do a double-take — that’s top-tier territory for a frontend utility.

What Problem Does It Actually Solve

pretext has a laser-focused mission: measure text dimensions and layout precisely in the browser, without touching the DOM. No rendering, no reading back from hidden elements, just pure calculation.

Digging into the API, it handles three core scenarios:

1. Single-line text measurement

import { measureText } from 'pretext';

const metrics = measureText({
  text: 'Hello World',
  fontSize: 16,
  fontFamily: 'Inter, sans-serif',
  fontWeight: 400,
});

console.log(metrics.width);  // exact pixel width
console.log(metrics.height); // line height

2. Multi-line wrapping calculations

import { measureLines } from 'pretext';

const lines = measureLines({
  text: 'This is a long paragraph that needs to wrap within a fixed container width',
  width: 200,
  fontSize: 14,
  lineHeight: 1.5,
});

// returns each line's text and dimensions
lines.forEach(line => console.log(line.text, line.width));

3. Rich text with mixed styles

import { measureRichText } from 'pretext';

const result = measureRichText({
  nodes: [
    { text: 'Normal text ', fontSize: 14 },
    { text: 'bold text', fontSize: 14, fontWeight: 700 },
  ],
  width: 300,
});

Getting Started

Install is straightforward:

npm install pretext

The API is refreshingly minimal. Pass in your font, size, and text, get back precise dimensions. I ran a few tests comparing against actual DOM renders — the difference is basically sub-pixel. Good enough for anything I can think of.

The speed is what really got me. Since it skips the DOM entirely and does pure math, batch-measuring hundreds of text segments happens in milliseconds. If you’re doing dynamic layout calculations — auto-positioning chart labels, generating PDF previews, that kind of thing — this is a lifesaver.

Pros and Cons

Pros:

• Highly accurate, practically matches browser rendering
• Fast, pure calculation with no DOM overhead
• Clean API, almost zero learning curve
• Full TypeScript support

Cons:

• Web Font support needs extra care; measurements can be off if fonts haven’t loaded yet
• Some advanced CSS features (like certain text-transform or letter-spacing edge cases) aren’t fully covered
• For 45K+ stars, issue activity is surprisingly quiet — edge-case bugs might sit unfixed
• Browser-only, no Node.js support

Who Should Use It

If you’re building chart libraries, rich text editors, PDF generators, or anything that needs to “know how big text will be before rendering it,” pretext will save you serious headaches.

But if you just need an occasional width check, stick with the native APIs. No need for another dependency.

Rating: ⭐⭐⭐⭐⭐