Ink: React for CLIs

This one is short and sweet.

Are you familiar with React? Then you know Ink. I haven't tried this out yet, but basically it's a custom React renderer that allows you to build beautiful CLIs.

vadimdemedes / ink

🌈 React for interactive command-line apps

---

React for CLIs. Build and test your CLI output using components.

Ink provides the same component-based UI building experience that React offers in the browser, but for command-line apps It uses Yoga to build Flexbox layouts in the terminal, so most CSS-like properties are available in Ink as well If you are already familiar with React, you already know Ink.

Since Ink is a React renderer, all features of React are supported Head over to the React website for documentation on how to use it. Only Ink's methods are documented in this readme.

Fully AI-generated pull requests are not accepted. You can use AI, but should be verified and cleaned up by a human. Only Opus 4.6+ (high-effort) and Codex 5.4+ (extra high) are accepted models. Preferably created with Opus and verified by Codex.

---

^{My open source work is supported by the community ❤️}

Install

npm install ink react

Note

…

View on GitHub

Flexbox in a CLI? 🤯 React hooks in a CLI? YOLO my friend, YOLO.


Here's a little example straight from the repository's ReadME:

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/>);

Even the folks at npm think it's kinda cool.

Vadim, the author of Ink has a great intro post to it, Building rich command-line interfaces with Ink and React.

So what are you going to build with Ink? 😉

Happy coding!

Photo by Pierre Bamin on Unsplash

Comments

[dAVE Inden]

Very cool. I found Ink awhile back and forgot about it. Thanks for reminding me! Building a CLI with React is a really cool and interesting idea. Now, I want to build something with this. :)

[Nick Taylor]

Yeah, I'd like to try building something with it too. Just need an idea...

[dAVE Inden]

Whoa. That’s cool. It is great to see npm starting to use it for their CLI. Now, I just need an idea too!