explaingit

vadimdemedes/ink

📈 Trending38,431TypeScriptAudience · developerComplexity · 2/5ActiveLicenseSetup · easy

TLDR

Build interactive command-line apps using React components, with Flexbox layout and live updates in the terminal.

Mindmap

mindmap
  root((Ink))
    What it does
      React for CLI
      Terminal layout
      Live updates
    How it works
      Flexbox positioning
      Component rendering
      State management
    Use cases
      Progress spinners
      Config wizards
      Live dashboards
      Interactive prompts
    Tech stack
      React
      Yoga layout
      Node.js
      TypeScript
    Who uses it
      Claude Code
      Shopify CLI
      Prisma
      Wrangler

Things people build with this

USE CASE 1

Build a CLI tool with a progress spinner that updates in real time as files download.

USE CASE 2

Create an interactive multi-step configuration wizard that guides users through setup with dynamic prompts.

USE CASE 3

Display a live dashboard in the terminal that refreshes automatically as data changes.

USE CASE 4

Build an interactive CLI menu where users can select options and see instant feedback.

Tech stack

TypeScriptReactNode.jsYoganpm

Getting it running

Difficulty · easy Time to first run · 5min
Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

Ink is a library that lets you build interactive command-line applications using React, the same JavaScript framework normally used for building web user interfaces. The core insight is that a terminal's output is just text laid out in a grid, which is not so different from a web page. Ink maps React's component model onto the terminal so you can write CLI tools using familiar patterns: components, props, state, hooks like useState and useEffect, and the same declarative rendering approach you would use in a browser app. Under the hood, Ink uses Yoga, Facebook's implementation of the Flexbox layout algorithm, to position elements in the terminal. This means you can use CSS-like properties such as padding, margins, and flex direction to arrange text and boxes in your CLI output. It supports all standard React features including context, refs, suspense, and concurrent rendering. When state changes, Ink re-renders only the parts of the terminal output that changed rather than clearing and rewriting everything. You would use Ink when building a CLI tool that needs dynamic, interactive output, for example, a spinner showing download progress, a multi-step configuration wizard, a live dashboard updating in real time, or an interactive prompt. It is a particularly good fit if you already know React and want to apply that knowledge to terminal interfaces. The README notes it is used by several well-known tools including Claude Code, Gemini CLI, GitHub Copilot CLI, Cloudflare's Wrangler, Shopify CLI, and Prisma. The library is written in TypeScript, runs on Node.js, and is installed via npm.

Copy-paste prompts

Prompt 1
Show me how to create a simple Ink component that displays a loading spinner with a message.
Prompt 2
How do I use useState and useEffect in Ink to build a CLI that fetches and displays live data?
Prompt 3
Create an Ink example that uses Flexbox to layout a two-column dashboard in the terminal.
Prompt 4
How do I handle user input and keyboard events in an Ink CLI application?
Prompt 5
Show me how to build a multi-step form in Ink where users navigate between screens.
Open on GitHub → Explain another repo

Generated 2026-05-18 · Model: sonnet-4-6 · Verify against the repo before relying on details.