Getting Started

Use create-ink-app to quickly scaffold a new Ink-based CLI.

npx create-ink-app my-ink-cli

Alternatively, create a TypeScript project:

npx create-ink-app --typescript my-ink-cli

Manual JavaScript Setup

<details><summary>Click to expand manual setup instructions</summary>

Ink requires the same Babel setup as you would do for regular React-based apps in the browser.

Set up Babel with a React preset to ensure all examples work as expected. After installing Babel, install @babel/preset-react and insert the following configuration in babel.config.json:

npm install --save-dev @babel/preset-react

{
	"presets": ["@babel/preset-react"]
}

Next, create a file source.js, where you'll type code that uses Ink:

import React from 'react';
import {render, Text} from 'ink';

const Demo = () => <Text>Hello World</Text>;

render(<Demo />);

Then, transpile this file with Babel:

npx babel source.js -o cli.js

Now you can run cli.js with Node.js:

node cli

If you don't like transpiling files during development, you can use import-jsx or @esbuild-kit/esm-loader to import a JSX file and transpile it on the fly.

</details>

Understanding the Layout System

Ink uses Yoga, a Flexbox layout engine, to build great user interfaces for your CLIs using familiar CSS-like properties you've used when building apps for the browser.

Important: Each element is a Flexbox container. Think of it as if every <div> in the browser had display: flex.

See <Box> built-in component for documentation on how to use Flexbox layouts in Ink.

Note: All text must be wrapped in a <Text> component.