Ink: React for Interactive Command-Line Apps

Ink, a JavaScript library self-described as "React for Command Line Interfaces", recently released its second major iteration. Ink enables to build command-line applications by assembling React components. Developers may then leverage their React knowledge, and the React ecosystem.

Ink is a React renderer that turns a React component tree into strings to be rendered on an output terminal. Ink 2.0 thus naturally supports React features such as Hooks or Context . It additionally interfaces easily with important components of the React ecosystem, such as Redux .

The documentation gives the following illustrative example:

import React, {Component} from 'react';
import {render, Color} from 'ink';

class Counter extends Component {
  constructor() {
    super();

    this.state = {
      i: 0
    };
  }

  render() {
    return (
      <Color green>
        {this.state.i} tests passed
      </Color>
    );
  }

  componentDidMount() {
    this.timer = setInterval(() => {
      this.setState({
      i: this.state.i + 1
      });
    }, 100);
  }

  componentWillUnmount() {
    clearInterval(this.timer);
  }
}

render(<Counter/>);

which renders in the terminal as:

Ink 2.0 comes with 7 built-in components . Another 10 third-party components are also available for composing terminal applications, and 14 more are being migrated to Ink 2.0. Those reusable components address common terminal user interface layouts and behaviors (text input, progress bar, spinner, confirm input, scroll bar, autocomplete, text animation, image displaying and more). The components also tackle important concerns such as linking, routing, animation, or color.

Ink 2.0 uses Yoga , a cross-platform layout engine which implements Flexbox . As such, each element is a Flexbox container and may use the relevant Flexbox parameters ( flexShrink , flexGrow , flexDirection and many more). The Box built-in component may as a result be used to configure layouts. The following component:

import {render, Box, Text, Color} from 'ink';

const Flexbox = () => (
    <Box padding={2} flexDirection="column">
        <Box>
            <Box width={14}>
                <Text bold>Total tests:</Text>
            </Box>

            12
        </Box>

        <Box>
            <Box width={14}>
                <Text bold>Passed:</Text>
            </Box>

            <Color green>10</Color>
        </Box>

        <Box>
            <Box width={14}>
                <Text bold>Failed:</Text>
            </Box>

            <Color red>2</Color>
        </Box>
    </Box>
);

render(<Flexbox/>);

would render as follows:

Ink components can be tested with ink-testing-library , inspired from react-testing-library , a popular alternative to Jest for testing React components. A counter application may for instance be tested with:

import React from 'react';
import {Text} from 'ink';
import {render} from 'ink-testing-library';

const Counter = ({count}) => <Text>Count: {count}</Text>;

const {lastFrame, rerender} = render(<Counter count={0}/>);
lastFrame() === 'Count: 0'; //=> true

rerender(<Counter count={1}/>);
lastFrame() === 'Count: 1'; //=> true

There is a distinction to be made between terminal and command-line applications. Terminal applications may feature full-screen graphical user interfaces with complex navigational and input abilities.

React-blessed , based on the blessed terminal interface library , enables applications such as the following:

Ink caters to simpler command-line application interfaces, with simpler input abilities:

Ink.js is available under the MIT open source license. Contributions are welcome via the GitHub package .