Home › Entities › Terminal Renderer

Terminal Renderer

Description

The Terminal Renderer is a browser-grade rendering stack that brings modern UI capabilities to a terminal environment. At its core sits a custom React reconciler built on top of the Ink framework, which transposes React's component model into terminal escape sequences. Rather than relying on basic text output, Claude Code renders its entire interface through a sophisticated pipeline that rivals the rendering complexity of a web browser.

The layout engine uses Yoga compiled to WebAssembly to provide CSS-like flexbox layout calculations. Every frame is computed through Yoga's constraint solver, allowing components to express padding, margins, flex-grow, and alignment semantics identical to those used in web development. This means the terminal UI can adapt fluidly to different terminal widths and handle complex nested layouts without manual character-counting.

Rendering Pipeline

The renderer operates under a strict 16ms frame budget (targeting 60fps) to maintain smooth visual output during streaming responses. A double-buffering strategy prevents visible tearing: one buffer is rendered to while the other is displayed, and the two are swapped atomically at the end of each frame. The diff between frames is computed so that only changed cells are written to stdout, minimizing I/O overhead.

Component Role
React Reconciler Translates JSX component tree into terminal layout nodes
Yoga WASM Computes flexbox layout for every node in the tree
Double Buffer Maintains front/back buffers to prevent tearing
Diff Engine Computes minimal set of terminal escape sequences per frame
Scroll Manager Uses hardware scroll regions (DEC DECSTBM) for efficient content scrolling

Internationalization and Character Handling

CJK (Chinese, Japanese, Korean) characters occupy two terminal columns but are a single codepoint. The renderer includes a character-width table that correctly accounts for double-wide characters during layout. Emoji handling is similarly complex, as many emoji are composed of multiple codepoints joined by Zero-Width Joiners (ZWJ). The width calculation must resolve the final rendered width of composed emoji sequences to avoid layout misalignment.

Hardware Scroll Regions

Instead of redrawing the entire screen when content scrolls, the renderer leverages DEC terminal scroll region escape sequences (CSI ; r). This delegates scrolling to the terminal emulator's own buffer management, which on modern terminals can be GPU-accelerated. The result is substantially lower CPU usage during long streaming outputs compared to naive full-screen redraws.

Integration Points

The Terminal Renderer provides the visual layer for vim-mode, which implements a full Vim state machine for input editing within the same rendering pipeline. The tt-function orchestrates the agent run loop whose output flows through this renderer. Streaming responses from queryengine-ts are rendered frame-by-frame as tokens arrive from the streaming-tool-executor.

Key claims

Relations

Sources

src-20260409-a5fc157bc756