Pretext Complete Guide: 300x Faster Text Layout Without DOM Manipulation 🚀

The 30-Year Web Problem: The Text Measurement Dilemma 🎯

Every web developer has faced this problem at some point: "How many lines will this text wrap to at 300px width, and what's the total height?" To answer this seemingly simple question, we've paid the heavy price of DOM manipulation for decades.

According to Google's Chrome DevTools team, a single forced reflow can block the main thread for 10-100ms on mobile devices. Multiply that by 500 text blocks, and you get delays measured in seconds. This becomes critical for dynamic UIs like virtual scrolling or masonry layouts.

Enter Pretext: A Revolution That Skips the DOM ⚡

In March 2026, Cheng Lou, senior engineer at Midjourney and creator of React Motion (21,700+ GitHub stars), released Pretext. This 15KB pure JavaScript/TypeScript library is not just a performance improvement—it's a paradigm shift.

Pretext's core insight is remarkably simple: canvas.measureText() uses the same font engine as DOM rendering but doesn't trigger layout reflow. Canvas operates in a completely separate context outside the layout tree.

Core Architecture: The Two-Phase prepare() and layout() 🏗️

Pretext's architecture is clearly separated into two phases. This is the essence of a caching strategy: pay once (Prepare) and reuse infinitely (Layout).

Phase 1: prepare() - One-Time Investment

The prepare() function is the "expensive" phase that runs only once when text first appears:

• Intelligent text segmentation using Intl.Segmenter
• Measure each segment's width using Canvas measureText()
• Cache results (reusable for identical text/font)
• Handle bidirectional text (BiDi)
• Adjust for emojis and special characters

import { prepare, layout } from '@chenglou/pretext'

// Phase 1: Run once (~19ms for 500 texts)
const prepared = prepare(
  'AGI 春天到了. بدأت الرحلة 🚀', 
  '16px Inter'
)

// Phase 2: Run on every resize (~0.09ms)
const { height, lineCount } = layout(prepared, textWidth, 20)
// Pure arithmetic - ZERO DOM reflow!

Phase 2: layout() - Infinite Reuse

The layout() function performs pure arithmetic operations based on cached width data. When font size or container width changes, you can instantly calculate a new layout without touching the DOM.

Advanced API: Manual Line Layout

For more granular control, you can use these APIs with prepareWithSegments:

import { prepareWithSegments, layoutWithLines, walkLineRanges, layoutNextLine } from '@chenglou/pretext'

// Get all line information
const prepared = prepareWithSegments('Text content', '18px "Helvetica Neue"')
const { lines } = layoutWithLines(prepared, 320, 26)

// Check line width and cursor position only (no string creation)
walkLineRanges(prepared, 320, line => {
  console.log(line.width, line.start, line.end)
})

// Dynamic width - text flow around images
let cursor = { segmentIndex: 0, graphemeIndex: 0 }
let y = 0
while (true) {
  const width = y < image.bottom ? columnWidth - image.width : columnWidth
  const line = layoutNextLine(prepared, cursor, width)
  if (line === null) break
  ctx.fillText(line.text, 0, y)
  cursor = line.end
  y += 26
}

Performance Comparison: What 300x Faster Means 📊

Pretext's performance improvement isn't just a number. 300-600x speedup changes what's possible in web UI development.

Browser-Specific Performance

Pretext is optimized for browser-specific characteristics. Dramatic performance improvements are especially visible in Safari:

• Chrome: layout() 0.09ms vs DOM 43.50ms → 483x faster
• Safari: layout() 0.12ms vs DOM 149.00ms → 1,242x faster

Practical Usage: Code Examples and Patterns 💻

Installation

npm install @chenglou/pretext
# or
bun add @chenglou/pretext

Use Case 1: Virtual Scrolling

When you need to pre-calculate row heights in a table with 100,000 rows:

import { prepare } from '@chenglou/pretext'

// Pre-prepare all row texts
const preparedRows = rows.map(row => ({
  id: row.id,
  prepared: prepare(row.text, '14px Inter')
}))

// Calculate only needed row heights based on scroll position
function getRowHeight(rowId, containerWidth) {
  const row = preparedRows.find(r => r.id === rowId)
  const { height } = layout(row.prepared, containerWidth, 20)
  return height
}

Use Case 2: Masonry Layout

Predict card heights in a Pinterest-style masonry grid:

function calculateMasonryLayout(items, containerWidth, columnCount) {
  const columnHeights = new Array(columnCount).fill(0)
  const positions = []
  
  items.forEach(item => {
    const { height } = layout(item.prepared, 
      containerWidth / columnCount - GAP, 
      LINE_HEIGHT
    )
    
    // Place in shortest column
    const shortestColumn = columnHeights.indexOf(Math.min(...columnHeights))
    positions.push({
      x: shortestColumn * (containerWidth / columnCount),
      y: columnHeights[shortestColumn]
    })
    columnHeights[shortestColumn] += height + GAP
  })
  
  return positions
}

Use Case 3: Accessible Accordion

When you need to know the exact height of content for expand/collapse animations:

function Accordion({ title, content }) {
  const [isOpen, setIsOpen] = useState(false)
  const prepared = useMemo(() => 
    prepare(content, '16px Inter'), 
    [content]
  )
  
  // Calculate height before DOM rendering!
  const { height } = layout(prepared, containerWidth, 24)
  
  return (
    <div>
      <button onClick={() => setIsOpen(!isOpen)}>{title}</button>
      <div style={{ 
        height: isOpen ? height : 0,
        transition: 'height 0.3s ease',
        overflow: 'hidden'
      }}>
        {content}
      </div>
    </div>
  )
}

Use Case 4: Auto-Resizing Textarea

function AutoResizeTextarea() {
  const [value, setValue] = useState('')
  
  // textarea-style whitespace handling
  const prepared = useMemo(() => 
    prepare(value, '16px Inter', { whiteSpace: 'pre-wrap' }),
    [value]
  )
  
  const { height } = layout(prepared, textareaWidth, 24)
  
  return (
    <textarea
      value={value}
      onChange={e => setValue(e.target.value)}
      style={{ height: `${height}px`, resize: 'none' }}
    />
  )
}

Demo Analysis: From Dragons to Editorial Engines 🎨

The demo page at chenglou.me/pretext isn't just a technical showcase— it demonstrates the spectrum of UI patterns that are now possible.

These demos show that Pretext doesn't just make things faster— it enables UI patterns that were previously impossible. The "shrink wrap" feature (calculating minimum width for multi-line text) is something CSS hasn't supported in 30 years.

Community Response and Future Outlook 🌟

Pretext exploded onto the scene: 14,000 GitHub stars and 19 million X (Twitter) impressions in just 48 hours. It now has over 20,000 stars.

Hacker News Community Response

Real Developer Use Cases

• Remotion users: Solving the difficulty of calculating text line counts for dynamic subtitles
• Recharts: Considering Pretext for optimizing chart text labels
• AI agent developers: Perfect for development workflows using Claude Code and Codex
• Accessibility experts: Can improve performance while maintaining screen reader compatibility

Future Roadmap

Cheng Lou has announced plans for the following features:

• Server-side rendering support (works in Node.js without Canvas)
• More CSS property support (letter-spacing, word-spacing, etc.)
• Improved Web Worker compatibility
• More language-specific handling (Korean particle processing, etc.)

Conclusion: A New Standard for Web Development 🎯

Pretext isn't just a library. It's a paradigm shift that releases web developers from constraints they've had to accept for 30 years.

Cheng Lou, who changed the paradigm of animation with React Motion, is once again reshaping the web development landscape. This 15KB engine will become the standard for high-performance text UI for years to come.

Run npm install @chenglou/pretext right now. Are you ready to break free from DOM reflow constraints and enter the world of pure arithmetic? The future of text layout is already here. 🚀