Ink Render Pipeline
- Entity ID:
ent-20260420-b01a00000009 - Type:
concept - Scope:
shared - Status:
active - Aliases: terminal render pipeline, ink rendering flow
Description
5-stage rendering pipeline that turns React components into terminal output: (1) src/ink.ts exposes render()/createRoot() wrapped with ThemeProvider; (2) src/ink/root.ts creates an Ink root and mounts the React tree; (3) src/ink/reconciler.ts drives a custom React reconciler targeting terminal nodes; (4) src/ink/dom.ts models terminal 'DOM' nodes; (5) src/ink/renderer.ts converts the virtual DOM to terminal strings, handling flexbox via Yoga and colors via chalk/ansi. Common failure modes during rebuild: missing yoga-wasm-web, React 19 reconciler mismatch, non-TTY stdout, missing chalk.
Key claims
- Claude Code embeds a custom fork of Ink rather than using the upstream package
- Ink render pipeline has five sequential stages from src/ink.ts to terminal strings
- Claude Code uses React 19 in a custom reconciler targeting terminal output
- Ink rendering requires Yoga for flexbox layout
Relations
- Ink Render Pipeline --[implemented_by]--> src/ink Custom Fork
- Ink Render Pipeline --[detailed_by]--> Terminal Renderer
- scripts/test-ink.tsx --[verifies]--> Ink Render Pipeline