ZeroJitter

ZeroJitter provides a React component that streams language‑model tokens directly to a canvas element, avoiding the DOM’s layout and repaint cycles. By offloading text measurement and line‑breaking logic to a Web Worker, the library computes line positions, heights and widths without triggering reflows, then paints the result with canvas fillText(). The component also mirrors the canvas output to an aria‑live div, preserving accessibility and selection features.

The approach is targeted at developers building chat or other LLM‑driven interfaces where token‑by‑token updates cause visible jitter, dropped frames or stuttering scrollbars. It replaces the usual pattern of inserting each token into the DOM, which forces style recalculation, layout, paint and composite for every update. By keeping the rendering path on the compositor thread, ZeroJitter maintains 60 fps and sub‑millisecond layout times even at high token rates.

ZeroJitter is experimental, has zero external dependencies, and can be installed via npm. It is designed to work with existing LLM streaming setups, such as StreamMD, and offers a canvas‑based rendering pipeline while still supporting line breaking, bidirectional text, CJK, and emoji handling.