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, Ink has successfully validated the feasibility of "building CLI interfaces with components." It is adopted by numerous well-known projects such as Claude Code, GitHub Copilot CLI, Cloudflare Wrangler, and Prisma, 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.

---

What is ngx-ink?

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.

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 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>

🎬 Responsive Real-time Updates

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:

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

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

⌨️ Complete Interaction Capabilities

• Keyboard Input Listening — useInput hook supports arrow keys, key combinations, and full key mapping
• Focus Management — useFocus enables Tab-based focus switching between components
• Window Size Response — useWindowSize automatically detects terminal size changes
• Standard Stream Access — useStdin / useStdout / useStderr directly manipulate I/O streams

🎭 Rich Built-in Components

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

🎨 Complete ANSI Color Support

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>

♿ Accessibility Support

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

---

Why Choose ngx-ink?

1. Full Capabilities of Ink, Expressed in Angular

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

• ✅ Flexbox terminal layout (Yoga engine)
• ✅ Complete ANSI colors and text styles
• ✅ Responsive real-time updates
• ✅ Keyboard input, focus management, animation-driven
• ✅ Static rendering, Transform text transformation
• ✅ Screen reader support and ARIA accessibility

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

2. React Hooks → Angular Hooks, Zero Mental Shift

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.

3. Based on Ink 7.1.0, Production-Grade Reliability

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:

• Proven at Scale — Ink is adopted by projects like Claude Code, GitHub Copilot CLI, and Cloudflare Wrangler
• Mature Edge Case Handling — Terminal resize, special characters, ANSI escape sequences, and other edge cases have been thoroughly addressed
• Continuous Evolution — Improvements in the Ink ecosystem naturally reflect in ngx-ink

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

4. Native Integration with the Angular Ecosystem

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

• Start using the standard bootstrapApplication approach
• Supports Angular routing, forms, HTTP client
• Full dependency injection and Token mechanisms
• TypeScript type safety with compile-time checking

---

Quick Start

Installation

npm install @cyia/ngx-ink

Using the Starter Template (Recommended)

The fastest way to get started is using the 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.

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: ngx-ink
• Starter Template: ngx-ink-starter
• 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!