ngx-ink: The Angular Version of Ink, A Component-Based Revolution for Terminal UI

Ink is already the most mature terminal UI framework in the React ecosystem. Now, Angular developers can enjoy the same power.

Background: Ink Has Proven This Path Works

In the React ecosystem, , , and . It reuses Ink's core logic—including ANSI processing, Yoga Flexbox layout calculation, and rendering pipeline—but transforms the entire programming model from React to Angular.

Core Promise: API equivalence, seamless experience transition.

If you know how to use it in Ink, you know how to use it in ngx-ink. The only difference is that the syntax changes from React-style to Angular-style.

Core Features

🎨 Declarative Componentized UI

Say goodbye to string concatenation. Use familiar Angular component syntax to build your interface in the terminal:

@Component({

  selector: 'app-root',

  template: `

    <box [style]="{ flexDirection: 'column', padding: 1 }">

      <text [color]="'cyan'" [bold]="true">🚀 My CLI Tool</text>

      <text [color]="'green'">Status: Running</text>

      <text [color]="'yellow'">Progress: {{ progress() }}%</text>

    </box>

  `

})

export class AppComponent {}

📐 Flexbox Terminal Layout

Powered by Facebook's template:

git clone https://github.com/wszgrcy/ngx-ink-starter.git

cd ngx-ink-starter

npm install

npm start

That's it—your terminal app is up and running, with no build configuration required.

Write a Counter by Hand

import { Component, signal, effect } from '@angular/core';

import { BoxComponent, TextComponent } from '@cyia/ngx-ink';



@Component({

  selector: 'app-root',

  standalone: true,

  imports: [BoxComponent, TextComponent],

  template: `

    <box [style]="{ padding: 2 }">

      <text [color]="'cyan'" [bold]="true">Counter: {{ counter() }}</text>

      <text [color]="'green'">Press any key to increment</text>

    </box>

  `

})

export class AppComponent {

  counter = signal(0);



  constructor() {

    useInput(() => {

      this.counter.update(v => v + 1);

    });

  }

}

Who Needs ngx-ink?

• 
  Angular Developers — Want to build interactive CLIs in the terminal without learning React


• 
  Ink Users — Projects requiring Angular tech stack, hoping to reuse Ink's API capabilities


• 
  Cross-Framework Teams — Teams using both React and Angular, wanting CLI tools to maintain a unified component-based development experience


• 
  Terminal Tool Enthusiasts — Want to build beautiful command-line interfaces in a familiar way

Project Information

• 
  npm Package: @cyia/ngx-ink
  


• 
  GitHub:
  


• 
  Angular Version: Supports Angular 22+


• 
  License: MIT

Conclusion

Ink has proven the feasibility of building CLI interfaces with components. Now, ngx-ink brings this capability to Angular developers.

No need to learn new paradigms, no need to abandon familiar tools. What Ink has, ngx-ink has; what Angular excels at, ngx-ink excels at too.

ngx-ink — The Angular form of Ink.

💡 If you like this project, feel free to Star and Fork, and we welcome Issues and PRs to help improve it together!