OpenTUI

Zig ネイティブのターミナル UI コア。Bun + TypeScript から、Core / React / Solid / Keymap / Three.js WebGPU / Examples を組み合わせて複雑な TUI を構築する。

1 — 概要
何か

OpenTUI はZig で書かれたネイティブのターミナル UI コアで、TypeScript バインディングを備える。ネイティブコアは C ABI を露出するため、任意の言語から利用可能。OpenCode の本番で利用され、terminal.shop でも使われる予定。現在の公式ドキュメントは packages/web/src/content/docs/**/*.mdx を正としており、Core、Renderer、Layout、Keymap、React/Solid、Plugin、Component、Environment Variables に分かれている。

Zigネイティブコア
Bun現在の実行環境
Keymap共有キー操作
React/SolidJSX バインディング

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

2 — パッケージ構成
モノレポ
パッケージ説明
@opentui/coreZig ネイティブコアの TypeScript バインディング。Renderer、Renderable、Layout、入力、テストの中心。
@opentui/threeOpenTUI 上で Three.js WebGPU を描画するレンダラー。bun-webgpu、Three.js、任意で Rapier / Planck と連携。
@opentui/solidSolid.js の fine-grained reactivity で TUI を書く JSX バインディング。
@opentui/reactReact パターンでターミナル UI を組む JSX バインディング。createRoot(renderer) を使う。
@opentui/keymapターミナルとブラウザで共通利用できるキー割り当て・コマンド・シーケンスエンジン。
@opentui/examplesブラウザ向け・単体実行向けのサンプル群と executable build。
3 — インストール
前提

現在の OpenTUI は Bun 専用。Deno / Node 対応は進行中。パッケージをビルドする場合は Zig も必要になる。

Core を直接使う

mkdir my-tui && cd my-tui
bun init -y
bun add @opentui/core

create-tui で始める

bun create tui
bun create tui --template react

create-tui で Bun ベースの TUI プロジェクトを生成できる。React テンプレートを使う場合は @opentui/react と @opentui/core をまとめて扱う。

4 — クイックスタート
Hello world 
import { createCliRenderer, Text } from "@opentui/core"

const renderer = await createCliRenderer({
  exitOnCtrlC: true,
})

renderer.root.add(
  Text({
    content: "Hello, OpenTUI!",
    fg: "#00FF00",
  }),
)

bun index.ts で実行すると緑のテキストが表示される。Text と Box は factory function で、props と children を渡して宣言的に組み立てる。

リポジトリの Examples

bun install
cd packages/examples
bun run dev

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

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

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

5 — Renderer と Core Model
描画ループ

CliRenderer が OpenTUI の中心。ネイティブ Zig ライブラリを読み込み、ターミナル設定、入力、render loop、scrollback、console overlay を管理する。既定は alternate-screen だが、短命ツール向けの main-screen、通常出力の下部に TUI を固定する split-footer も選べる。

createCliRenderer → native Zig load → terminal config → Renderable tree → render loop
Box + Text 
import { Box, Text, createCliRenderer } from "@opentui/core"

const renderer = await createCliRenderer({
  exitOnCtrlC: true,
})

renderer.root.add(
  Box(
    { borderStyle: "rounded", padding: 1, flexDirection: "column", gap: 1 },
    Text({ content: "Welcome", fg: "#FFFF00" }),
    Text({ content: "Press Ctrl+C to exit" }),
  ),
)

Layout は Yoga/Flexbox ベース。flexDirection、justifyContent、alignItems、固定サイズ、パーセントサイズ、absolute positioning をターミナル上で扱う。

6 — React / Solid バインディング
JSX surfaces
Binding最小セットアップ特徴
@opentui/reactbun create tui --template react または bun install @opentui/react @opentui/core reactcreateRoot(renderer).render(<App />)。<text>、<box>、<markdown>、hooks、runtime plugin support。
@opentui/solidbun install solid-js @opentui/solid + jsxImportSource + bunfig.toml preloadrender(() => <App />)。multi-word component は ascii_font や tab_select のように snake_case。
Plugin support: 外部 TS/TSX モジュールを runtime import するアプリでは、React は @opentui/react/runtime-plugin-support、Solid は @opentui/solid/runtime-plugin-support を entry で読み込む。
7 — Keymap
Shared input engine

@opentui/keymap はターミナルとブラウザで使える host-agnostic な binding engine。layered shortcuts、discoverable commands、multi-stroke sequence、leader token、React/Solid provider を同じモデルで扱う。

import { registerDefaultKeys } from "@opentui/keymap/addons"
import { createOpenTuiKeymap } from "@opentui/keymap/opentui"
import { KeymapProvider } from "@opentui/keymap/react"

const keymap = createOpenTuiKeymap(renderer)
registerDefaultKeys(keymap)

createRoot(renderer).render(
  <KeymapProvider keymap={keymap}>
    <App />
  </KeymapProvider>,
)
Entrypoint役割
@opentui/keymapbare engine、key stringifier、shared types。
@opentui/keymap/opentuiOpenTUI host adapter。
@opentui/keymap/htmlDOM host adapter。docs app の HTML demo でも使われる。
@opentui/keymap/react / @opentui/keymap/solid事前作成した keymap を framework context で渡す provider / hooks。
8 — AI Skill・事例
AI コーディングアシスタント向け

OpenTUI の API やパターンを AI に教えるスキルは、現在リポジトリ内の docs 体系を参照する構造になっている。Getting Started、Core、Keymap、React、Solid、Components、Plugins、Env を intent ごとに読む。

  • Universal install: npx skills add anomalyco/opentui --skill opentui
  • Global install: npx skills add anomalyco/opentui --skill opentui -g
  • OpenCode: 同じ install command を利用。別 installer は不要。
Showcase: awesome-opentui で OpenTUI で作った TUI やリソースを紹介できる。

リポジトリ: anomalyco/opentui

ドキュメント: opentui.com/docs。ソース側では packages/web/src/content/docs/**/*.mdx が canonical reference。

技術: Zig（ネイティブコア）、Bun、TypeScript、Yoga レイアウト、Tree-Sitter、Three.js WebGPU、Keymap engine。

Env: OTUI_USE_CONSOLE、OTUI_DEBUG_FFI、OPENTUI_GRAPHICS、OPENTUI_FORCE_WCWIDTH などで runtime behavior を調整できる。