Shared from "Claude-Code" on Inkdown
Ink is a React renderer for terminals. Claude Code uses a customized Ink that handles layout (Yoga), ANSI escape codes, input handling, and screen updates. Understanding Ink is key to understanding the UI.
| File | Purpose |
|---|---|
ink/renderer.ts | Main rendering entry |
ink/reconciler.ts | React reconciler implementation |
ink/layout/yoga.ts | Yoga layout engine integration |
ink/layout/engine.ts | Layout calculation |
ink/layout/geometry.ts | Box geometry types |
ink/render-to-screen.ts | ANSI output generation |
ink/termio/ | Terminal I/O handling |
ink/components/ | Built-in components (Box, Text) |
ink/hooks/ | React hooks (useInput, etc.) |
Ink uses Yoga (Facebook's flexbox engine) for layout. Same concepts as CSS flexbox, but for terminal cells.
React's reconciler decides what needs to update. Ink provides a custom reconciler.
Instead of redrawing everything, Ink only updates changed cells:
For fullscreen apps, use alternate buffer (like vim):