Ink

Ink brings React’s component model to the terminal. It ships a custom React reconciler (built on react-reconciler) that renders JSX to a Yoga-powered Flexbox layout engine instead of the DOM, so <Box> and <Text> components with flexDirection, padding, borderStyle, and other CSS-like props lay out real terminal output. Because it’s just React, existing hooks, state, effects, and context all work unmodified, and the same testing patterns used for browser React components carry over to CLI output.

Beyond static rendering, Ink provides terminal-specific primitives that a plain string-building CLI would otherwise hand-roll: useInput/usePaste for keyboard and paste handling, useFocus/useFocusManager for focus traversal between interactive elements, Static for permanently-committed output like logs, and utilities for measuring rendered element dimensions. It underpins some of the most widely used AI and developer-tooling CLIs in the ecosystem, including Claude Code, Gemini CLI, and GitHub Copilot CLI.

What You Get

• A full React renderer (custom reconciler + Yoga layout engine) so JSX, hooks, state, and context work exactly as they do in browser React, just targeting stdout
• Box and Text primitives with Flexbox props (flexDirection, justifyContent, padding, borderStyle, gap) for laying out terminal UI declaratively
• Input handling hooks — useInput for keypresses (including Kitty keyboard protocol support) and usePaste for bracketed paste — so interactive CLIs don’t need to parse raw stdin themselves
• Focus management via useFocus/useFocusManager for building forms and menus with tab-style navigation between components
• A Static component for output that should be committed permanently to the terminal scrollback (e.g. completed task logs) separate from the actively re-rendered UI
• renderToString and snapshot-friendly rendering for testing CLI output the same way React components are tested in the browser

Common Use Cases

• Building agentic coding CLIs with live-updating status panes, streaming output, and interactive prompts (the pattern used by Claude Code and Gemini CLI)
• Interactive setup wizards and scaffolding tools that need multi-step forms, selection lists, and validation feedback in the terminal
• Long-running build/deploy CLIs that show progress bars, spinners, and structured multi-panel status while a task executes
• Dashboards and monitoring TUIs that need Flexbox layout and periodic re-renders driven by React state rather than manual redraw logic

Under The Hood

Architecture Ink’s core is a custom React reconciler (src/reconciler.ts, built on react-reconciler) paired with a parallel DOM-like tree (src/dom.ts) whose nodes carry Yoga layout nodes for Flexbox computation. render.ts wires a React root to an Ink instance (ink.tsx) that owns the output stream, a Yoga root node, and a log-update-style terminal writer (log-update.ts, write-synchronized.ts) that diffs and repaints only what changed rather than clearing and redrawing the whole screen. Rendering the DOM tree to terminal output happens in render-node-to-output.ts and renderer.ts, which walk the Yoga-computed layout and paint borders, backgrounds, and text into an output buffer. Because layout, diffing, and painting are cleanly separated stages, swapping the terminal writer or extending layout support doesn’t require touching the reconciler itself.

Tech Stack Written entirely in TypeScript (ESM-only, Node >=22), Ink depends on react-reconciler and scheduler to plug into React’s concurrent rendering, yoga-layout for Flexbox computation, and a cluster of small terminal-string utilities (ansi-escapes, cli-truncate, slice-ansi, wrap-ansi, string-width, chalk) for ANSI-aware text measurement and styling that a naive character-count approach would get wrong with wide/emoji characters. react and react-devtools-core are peer dependencies, keeping Ink decoupled from a specific React version within its supported range. The build is plain tsc compiling to build/, with no bundler needed since it’s a Node-only library.

Code Quality Tests run under ava (serial mode, TypeScript via tsx) with a large suite covering components, hooks, focus management, keyboard parsing, and terminal rendering edge cases, plus node-pty for exercising real pseudo-terminal behavior. Linting is enforced via xo (an ESLint preset) with a project-specific flat config, formatting via prettier, and tsc --noEmit for a separate typecheck step — all three gate npm test and run in CI (GitHub Actions) across two Node major versions. Naming and file structure follow a consistent one-concept-per-file convention across src/components and src/hooks.

What Makes It Unique Ink’s distinguishing choice is implementing a genuine React reconciler for the terminal rather than a template or virtual-DOM-diffing approach layered on top of string output — this is the same mechanism React Native and React-Three-Fiber use to target non-DOM surfaces, applied to stdout. Combined with Yoga for real Flexbox layout (not an approximation), it lets terminal UIs use the same mental model, hooks, and component composition patterns as web React, which is why large, actively maintained agentic CLIs adopted it as their rendering layer instead of writing bespoke terminal UI code.