OpenTUI

Zig ネイティブのターミナル UI コア。TypeScript バインディングとコンポーネントアーキテクチャで複雑な TUI を構築する。

1 — 概要

何か

OpenTUI はZig で書かれたネイティブのターミナル UI コアで、TypeScript バインディングを備える。ネイティブコアは C ABI を露出するため、任意の言語から利用可能。OpenCode の本番で既に利用され、terminal.shop でも使われる予定。正しさ・安定性・高性能を重視した拡張可能なコアで、コンポーネントベースのアーキテクチャと柔軟なレイアウトで複雑なターミナルアプリを実現する。

Zigネイティブコア

TSバインディング

C ABI他言語対応

React/Solidレコンシラ

公式ドキュメント: opentui.com/docs/getting-started

2 — パッケージ構成

モノレポ

パッケージ	説明
`@opentui/core`	Zig ネイティブコアの TypeScript バインディング。命令的 API と全プリミティブ。
`@opentui/solid`	OpenTUI 用 SolidJS レコンシラ。
`@opentui/react`	OpenTUI 用 React レコンシラ。

3 — インストール

前提

ビルドには Zig がシステムにインストールされている必要がある（Zig のセットアップ）。

TypeScript / JavaScript（bun）

bun install @opentui/core

クイックスタート（create-tui）

bun create tui

create-tui で bun ベースの TUI プロジェクトをすぐに生成できる。

4 — クイックスタート

リポジトリから実行

bun install
cd packages/core
bun run src/examples/index.ts

リポジトリをクローンせずにサンプルを試す場合（macOS / Linux / WSL / Git Bash）:

curl -fsSL https://raw.githubusercontent.com/anomalyco/opentui/main/packages/core/src/examples/install.sh | sh

Windows（PowerShell/CMD）の場合は GitHub Releases から最新リリースをダウンロードして試せる。

5 — Renderables

概念

Renderables は階層的なオブジェクトで、位置・ネスト・スタイルを指定してターミナルに描画する。Yoga レイアウトエンジンで柔軟なレイアウトが可能。Constructs は React / Solid のようなコンポーネントの「コンストラクタ」で、既存の Renderable を組み合わせて宣言的に UI を組む。

最小例（CLI Renderer）

import { createCliRenderer, TextRenderable } from "@opentui/core"

const renderer = await createCliRenderer()

const obj = new TextRenderable(renderer, {
  id: "my-obj",
  content: "Hello, world!"
})

renderer.root.add(obj)

CliRenderer がターミナル出力・入力・レンダリングループを司り、renderer.start() でライブループ（指定 FPS）で動かすことも、start せずにツリーやレイアウト変更時のみ再描画することもできる。

6 — AI スキル・事例

AI コーディングアシスタント向け

OpenTUI の API やパターンを AI に教えるスキルがある。

OpenCode（/opentui コマンド付き）: curl -fsSL https://raw.githubusercontent.com/msmps/opentui-skill/main/install.sh | bash
その他: npx skills add msmps/opentui-skill

Showcase: awesome-opentui で OpenTUI で作った TUI やリソースを紹介できる。

7 — 参考リンク

リポジトリ: anomalyco/opentui

ドキュメント: opentui.com/docs、開発ガイド・Getting Started・環境変数は packages/core/docs/ を参照。

技術: Zig（ネイティブコア）、TypeScript（バインディング）、Yoga レイアウト、Tree-Sitter（シンタックスハイライト統合）など。