wterm

dub-term — A terminal emulator for the web（README 要約）

1 — 概要
位置づけ

wterm はブラウザ向けのターミナルエミュレータ。描画先は DOM のため、ネイティブに近いテキスト選択・コピー／ペースト・検索・アクセシビリティが利用しやすい、という README の説明に基づく整理です。

コアは Zig で書かれ WebAssembly にコンパイルされ、README ではリリースビルドの .wasm がおおよそ 12 KB 規模であることに言及があります。

Zigコア言語
WASMブラウザ実行
DOMレンダリング先
WSPTY バックエンド
2 — 構成とデータの流れ
ざっくりした役割分担

リポジトリ直下の src/*.zig（terminal, parser, grid, wasm_api など）がエミュレータコア、packages/@wterm/* が JavaScript／TypeScript 側の橋渡しと UI 層、という形でモノレポが分かれています（ディレクトリ名からの推定。詳細実装はソース参照）。

README が列挙する機能から、ブラウザ側では ダーティ行の追跡 と requestAnimationFrame による更新、ResizeObserver によるリサイズが使われる旨が読み取れます。

flowchart TD
  subgraph browser [ブラウザ]
    D["@wterm/dom レンダラ"]
    I[入力・クリップボード]
  end
  W["WASM コア（Zig）\nエスケープシーケンス解析"]
  T["@wterm/core\nブリッジ・トランスポート"]
  B["PTY / シェルバックエンド\n（WebSocket 等）"]
  B -->|"バイナリフレーム"| T
  T --> W
  W --> D
  I --> D
  D --> I
図の注意: 上図は README の「WebSocket transport」「WASM core」「DOM rendering」の記述を整理した概念図です。実際のメッセージ形式や API は各パッケージの README / 型定義を参照してください。
3 — パッケージ（README の表）
npm スコープ @wterm
パッケージ説明（README 原文の要約）
@wterm/coreヘッドレス WASM ブリッジ + WebSocket トランスポート
@wterm/domDOM レンダラ、入力ハンドラ — vanilla JS ターミナル
@wterm/reactReact コンポーネント + useTerminal フック（TypeScript）
@wterm/just-bashjust-bash を用いたインブラウザ Bash シェル
@wterm/markdownターミナル内での Markdown 描画
4 — 機能（README の箇条書き）
プロダクトの売り
  • Zig + WASM コア — VT100 / VT220 / xterm 系エスケープシーケンスパーサを WASM にコンパイル（README の記載どおり）
  • DOM レンダリング — 選択・クリップボード・ブラウザ検索・スクリーンリーダー対応を README で強調
  • ダーティ行トラッキング — 変更行のみをフレームごとに再描画（requestAnimationFrame）
  • テーマ — CSS カスタムプロパティ。Default / Solarized Dark / Monokai / Light（README 記載）
  • オルタネートスクリーンバッファ — vim, less, htop 等向け
  • スクロールバック — リングバッファ（設定可能）
  • 24-bit カラー — RGB SGR
  • 自動リサイズ — ResizeObserver
  • WebSocket トランスポート — PTY バックエンドへの接続、バイナリフレーミングと再接続（README 記載）
5 — 開発（README + AGENTS.md）
前提とコマンド

前提（README）: Zig 0.16.0 以上、Node.js 20+、pnpm 10+、および portless（npm i -g portless）。

セットアップ・ビルド

pnpm install
zig build
zig build -Doptimize=ReleaseSmall
pnpm build

バニラデモ（README）

cd web && python3 -m http.server 8000

Next.js 例（README）

cp web/wterm.wasm examples/nextjs/public/
pnpm --filter nextjs dev

ルートの package.json では開発サーバに portless を使う想定で、各アプリが .localhost 名で届く旨が AGENTS.md にあります（例: docs.wterm.localhost、<name>.wterm.localhost）。

Zig テスト: zig build test（README 記載）
リポジトリ・サイト
  • wterm.dev — ホームページ（package.json の homepage）
  • GitHub: vercel-labs/wterm — ソース（package.json の repository.url）
  • ライセンス: Apache-2.0（README / package.json）