Measure text height.
Before the DOM.

// zero-reflow textarea height for JavaScript.
// canvas-based font metrics. pure arithmetic layout. no DOM reads.
// built for virtualized lists, chat UIs, and anything at scale.

scrollHeight has a dirty secret.

Every call to scrollHeight forces the browser to flush all pending style mutations and perform a synchronous layout reflow of the entire document tree. CSS is cascading — a single font-size change on a parent can reflow every descendant. In a virtualized chat list with 500 bubbles, that's 500 forced reflows per keystroke, dropping frame rate from 60fps to single digits.

Pretexify measures character widths once using the Canvas 2D API — which sits entirely outside the layout tree — caches them, then computes line-wrapping and height through pure arithmetic. The hot path reads zero DOM properties.

Up and running in minutes.

npm install @chenglou/pretext
# yarn add @chenglou/pretext
# pnpm add @chenglou/pretext

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

// Step 1 — once per text + font combo
const prepared = prepare(text, '14px Inter')

// Step 2 — on every resize or text change
const { height, lineCount } = layout(
  prepared,
  containerWidth,  // inner width px
  lineHeight       // line-height px
)

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

const FONT = '15px Inter', LINE_H = 24, PAD_V = 20

export function AutoResizeTextarea({ value, onChange }) {
  const handleChange = useCallback((e) => {
    const w    = e.target.clientWidth - 24
    const prep = prepare(e.target.value, FONT)
    const { height } = layout(prep, w, LINE_H)
    e.target.style.height = (height + PAD_V) + 'px'
    onChange(e.target.value)
  }, [onChange])

  return <textarea value={value} onChange={handleChange} />
}

<script src="https://cdn.jsdelivr.net/npm/@chenglou/pretext@latest/dist/pretext.umd.js"></script>
const prep = Pretext.prepare(text, font)
const { height } = Pretext.layout(prep, w, lineH)

Type anything. Watch it measure.

Toggle between Pretext and the classic DOM approach. Edit the textarea and observe compute time, line count, and height — live.

500 bubbles. One keystroke.

Simulate a virtualized chat list. Both panels measure the same N messages simultaneously — compare total time and see the difference firsthand.

Two functions. That's it.

// 1. Font string must exactly match CSS — weight, style, family stack
//    Wrong: 'Inter'   Right: '14px Inter, sans-serif'

// 2. layout() returns content height — add padding yourself
const totalHeight = height + paddingTop + paddingBottom

// 3. prepare() on text change, layout() on resize — they have different costs

// 4. SSR / Node.js — Canvas API is browser-only, guard accordingly
if (typeof window !== 'undefined') { /* use pretext here */ }

// 5. Works with emoji, CJK, RTL — Canvas measureText handles unicode

What it doesn't do.

Pretext is honest about its tradeoffs. Here's what you need to know before adopting it.

Works everywhere Canvas does.

Common questions answered.

Release history.