virtualized chat

1000 messages, 5 in the DOM. every block measured before it renders.

how it works

measure

text is measured with pretext — pure canvas arithmetic, zero DOM reads. code blocks, tables, images, and embeds are measured by plugins that own their dimensions.

virtualize

predicted heights feed into the virtualizer. only visible messages are in the DOM. scroll position is preserved across width changes. strategies are cached — streaming only recomputes 1 message per frame.

correct

after paint, a ResizeObserver measures the real DOM height. any drift between prediction and reality is corrected automatically. the result: accurate layout with zero layout thrashing.

parse + measure: 0.7msframe budget: 16msheadroom: 22x

live demo

real components — MessageBubble, MessageReasoning, ToolInvocations, pretext-md Markdown. code blocks, tables, blockquotes, lists, images, youtube, tool collapse, approval UI, failed tools, in-progress tools, reasoning blocks.

0 total0 DOM0px60 fps