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

> Source: <https://dev.to/wszgrcy/ngx-ink-the-angular-version-of-ink-a-component-based-revolution-for-terminal-ui-1k8i>
> Published: 2026-06-28 00:53:11+00:00

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

In the React ecosystem, [Ink](https://github.com/vadimdemedes/ink) has successfully validated the feasibility of "building CLI interfaces with components." It is adopted by numerous well-known projects such as [Claude Code](https://github.com/anthropics/claude-code), [GitHub Copilot CLI](https://github.com/features/copilot/cli), [Cloudflare Wrangler](https://github.com/cloudflare/wrangler2), and [Prisma](https://www.prisma.io), boasting a mature API design and rich ecosystem.

But there's one problem: **Angular developers are left out.**

Ink is built on React, relying on React's Hooks, JSX, and functional component model. For Angular teams, this means either learning an entirely new programming paradigm or giving up the ability to enjoy componentized UI in the terminal.

**ngx-ink was born to solve this problem.**

**ngx-ink** is the **complete Angular migration of Ink**. 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.

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 {}
```

Powered by Facebook's [Yoga](https://github.com/facebook/yoga) engine, ngx-ink implements full Flexbox layout capabilities in the terminal. `flexDirection`

, `justifyContent`

, `alignItems`

, `margin`

, `padding`

—these properties you take for granted in web development are now all available in the terminal.

```
<box [style]="{ flexDirection: 'row', justifyContent: 'space-between' }">
  <text>Left Item</text>
  <spacer></spacer>
  <text [color]="'green'">Right Item ✓</text>
</box>
```

Leveraging Angular Signals' reactivity, the terminal interface automatically refreshes as data changes, without manually calling update methods. Paired with the `useAnimation`

hook, easily implement spinner animations, progress bar scrolling, and other effects:

``` js
animation = useAnimation(signal({ interval: 80 }));

get spinner() {
  const chars = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];
  return chars[this.animation().frame % chars.length];
}
```

`useInput`

hook supports arrow keys, key combinations, and full key mapping`useFocus`

enables Tab-based focus switching between components`useWindowSize`

automatically detects terminal size changes`useStdin`

/ `useStdout`

/ `useStderr`

directly manipulate I/O streams| Component | Purpose |
|---|---|
`BoxComponent` |
Flexbox layout container |
`TextComponent` |
Text display with style support (colors, bold, italic, underline, etc.) |
`NewlineComponent` |
Line break control |
`SpacerComponent` |
Flexible blank space filling |
`StaticComponent` |
Static content rendering (logs, completed tasks, etc.) |
`TransformComponent` |
Text transformation processing |

Built on Chalk, supporting all ANSI color names, as well as background colors, bold, italic, underline, strikethrough, reverse video, and other rich text styles. One line of code makes your terminal output delightful:

```
<text [color]="'green'" [bold]="true" [underline]="true">
  ✨ Success! All tests passed.
</text>
```

Built-in screen reader detection and ARIA attribute support ensure your CLI tool is friendly to everyone.

ngx-ink is not reinventing the wheel—it brings Ink's proven capabilities to Angular developers. Whatever features Ink has, ngx-ink has too:

**Whatever Ink can do, ngx-ink can do too. The only difference is that you're writing Angular code.**

Developers familiar with Ink already know React Hooks like `useState`

, `useEffect`

, and `useInput`

. In ngx-ink, these concepts are fully preserved and adapted to Angular style:

| Ink (React) | ngx-ink (Angular) |
|---|---|
`useState` |
`signal()` |
`useEffect` |
`effect()` |
`useInput` |
`useInput()` |
`useWindowSize` |
`useWindowSize()` |
`useAnimation` |
`useAnimation()` |
| JSX Component |
`@Component` decorator |
| Props |
`input()` / `output()`
|

API signatures are consistent, behaviors are consistent—you just need to convert the syntax.

ngx-ink reuses Ink's core logic layer—ANSI processing, Yoga layout calculation, and rendering pipeline all come from Ink 7.1.0. This means:

ngx-ink handles the Angular adaptation layer, with core rendering capabilities originating from Ink.

As an Angular library, ngx-ink seamlessly integrates into your Angular projects:

`bootstrapApplication`

approach

```
npm install @cyia/ngx-ink
```

The fastest way to get started is using the [ngx-ink-starter](https://github.com/wszgrcy/ngx-ink-starter) 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.

``` js
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);
    });
  }
}
```

`@cyia/ngx-ink`

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!