{"slug": "ngx-ink-the-angular-version-of-ink-a-component-based-revolution-for-terminal-ui", "title": "ngx-ink: The Angular Version of Ink, A Component-Based Revolution for Terminal UI", "summary": "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.", "body_md": "Ink is already the most mature terminal UI framework in the React ecosystem. Now, Angular developers can enjoy the same power.\n\nIn 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.\n\nBut there's one problem: **Angular developers are left out.**\n\nInk 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.\n\n**ngx-ink was born to solve this problem.**\n\n**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.\n\n**Core Promise: API equivalence, seamless experience transition.**\n\nIf 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.\n\nSay goodbye to string concatenation. Use familiar Angular component syntax to build your interface in the terminal:\n\n```\n@Component({\n  selector: 'app-root',\n  template: `\n    <box [style]=\"{ flexDirection: 'column', padding: 1 }\">\n      <text [color]=\"'cyan'\" [bold]=\"true\">🚀 My CLI Tool</text>\n      <text [color]=\"'green'\">Status: Running</text>\n      <text [color]=\"'yellow'\">Progress: {{ progress() }}%</text>\n    </box>\n  `\n})\nexport class AppComponent {}\n```\n\nPowered by Facebook's [Yoga](https://github.com/facebook/yoga) engine, ngx-ink implements full Flexbox layout capabilities in the terminal. `flexDirection`\n\n, `justifyContent`\n\n, `alignItems`\n\n, `margin`\n\n, `padding`\n\n—these properties you take for granted in web development are now all available in the terminal.\n\n```\n<box [style]=\"{ flexDirection: 'row', justifyContent: 'space-between' }\">\n  <text>Left Item</text>\n  <spacer></spacer>\n  <text [color]=\"'green'\">Right Item ✓</text>\n</box>\n```\n\nLeveraging Angular Signals' reactivity, the terminal interface automatically refreshes as data changes, without manually calling update methods. Paired with the `useAnimation`\n\nhook, easily implement spinner animations, progress bar scrolling, and other effects:\n\n``` js\nanimation = useAnimation(signal({ interval: 80 }));\n\nget spinner() {\n  const chars = ['⠋', '⠙', '⠹', '⠸', '⠼', '⠴', '⠦', '⠧', '⠇', '⠏'];\n  return chars[this.animation().frame % chars.length];\n}\n```\n\n`useInput`\n\nhook supports arrow keys, key combinations, and full key mapping`useFocus`\n\nenables Tab-based focus switching between components`useWindowSize`\n\nautomatically detects terminal size changes`useStdin`\n\n/ `useStdout`\n\n/ `useStderr`\n\ndirectly manipulate I/O streams| Component | Purpose |\n|---|---|\n`BoxComponent` |\nFlexbox layout container |\n`TextComponent` |\nText display with style support (colors, bold, italic, underline, etc.) |\n`NewlineComponent` |\nLine break control |\n`SpacerComponent` |\nFlexible blank space filling |\n`StaticComponent` |\nStatic content rendering (logs, completed tasks, etc.) |\n`TransformComponent` |\nText transformation processing |\n\nBuilt 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:\n\n```\n<text [color]=\"'green'\" [bold]=\"true\" [underline]=\"true\">\n  ✨ Success! All tests passed.\n</text>\n```\n\nBuilt-in screen reader detection and ARIA attribute support ensure your CLI tool is friendly to everyone.\n\nngx-ink is not reinventing the wheel—it brings Ink's proven capabilities to Angular developers. Whatever features Ink has, ngx-ink has too:\n\n**Whatever Ink can do, ngx-ink can do too. The only difference is that you're writing Angular code.**\n\nDevelopers familiar with Ink already know React Hooks like `useState`\n\n, `useEffect`\n\n, and `useInput`\n\n. In ngx-ink, these concepts are fully preserved and adapted to Angular style:\n\n| Ink (React) | ngx-ink (Angular) |\n|---|---|\n`useState` |\n`signal()` |\n`useEffect` |\n`effect()` |\n`useInput` |\n`useInput()` |\n`useWindowSize` |\n`useWindowSize()` |\n`useAnimation` |\n`useAnimation()` |\n| JSX Component |\n`@Component` decorator |\n| Props |\n`input()` / `output()`\n|\n\nAPI signatures are consistent, behaviors are consistent—you just need to convert the syntax.\n\nngx-ink reuses Ink's core logic layer—ANSI processing, Yoga layout calculation, and rendering pipeline all come from Ink 7.1.0. This means:\n\nngx-ink handles the Angular adaptation layer, with core rendering capabilities originating from Ink.\n\nAs an Angular library, ngx-ink seamlessly integrates into your Angular projects:\n\n`bootstrapApplication`\n\napproach\n\n```\nnpm install @cyia/ngx-ink\n```\n\nThe fastest way to get started is using the [ngx-ink-starter](https://github.com/wszgrcy/ngx-ink-starter) template:\n\n```\ngit clone https://github.com/wszgrcy/ngx-ink-starter.git\ncd ngx-ink-starter\nnpm install\nnpm start\n```\n\nThat's it—your terminal app is up and running, with no build configuration required.\n\n``` js\nimport { Component, signal, effect } from '@angular/core';\nimport { BoxComponent, TextComponent } from '@cyia/ngx-ink';\n\n@Component({\n  selector: 'app-root',\n  standalone: true,\n  imports: [BoxComponent, TextComponent],\n  template: `\n    <box [style]=\"{ padding: 2 }\">\n      <text [color]=\"'cyan'\" [bold]=\"true\">Counter: {{ counter() }}</text>\n      <text [color]=\"'green'\">Press any key to increment</text>\n    </box>\n  `\n})\nexport class AppComponent {\n  counter = signal(0);\n\n  constructor() {\n    useInput(() => {\n      this.counter.update(v => v + 1);\n    });\n  }\n}\n```\n\n`@cyia/ngx-ink`\n\nInk has proven the feasibility of building CLI interfaces with components. Now, **ngx-ink** brings this capability to Angular developers.\n\nNo 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.**\n\n**ngx-ink** — The Angular form of Ink.\n\n💡 If you like this project, feel free to Star and Fork, and we welcome Issues and PRs to help improve it together!", "url": "https://wpnews.pro/news/ngx-ink-the-angular-version-of-ink-a-component-based-revolution-for-terminal-ui", "canonical_source": "https://dev.to/wszgrcy/ngx-ink-the-angular-version-of-ink-a-component-based-revolution-for-terminal-ui-1k8i", "published_at": "2026-06-28 00:53:11+00:00", "updated_at": "2026-06-28 01:33:39.250985+00:00", "lang": "en", "topics": ["developer-tools", "large-language-models"], "entities": ["ngx-ink", "Ink", "Angular", "React", "Facebook", "Yoga", "Chalk", "Claude Code"], "alternates": {"html": "https://wpnews.pro/news/ngx-ink-the-angular-version-of-ink-a-component-based-revolution-for-terminal-ui", "markdown": "https://wpnews.pro/news/ngx-ink-the-angular-version-of-ink-a-component-based-revolution-for-terminal-ui.md", "text": "https://wpnews.pro/news/ngx-ink-the-angular-version-of-ink-a-component-based-revolution-for-terminal-ui.txt", "jsonld": "https://wpnews.pro/news/ngx-ink-the-angular-version-of-ink-a-component-based-revolution-for-terminal-ui.jsonld"}}