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

A developer created ngx-ink, a complete Angular migration of the React-based terminal UI framework Ink. It reuses Ink's core logic for ANSI processing and Flexbox layout via Facebook's Yoga engine, but transforms the programming model to Angular component syntax with Signals reactivity. The library enables Angular developers to build component-based CLI interfaces without learning React.

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