ghostty-web - GhosttyをWASMでコンパイルしてxterm.js APIと互換なWebターミナル

 (github.com/coder)
4 ポイント 投稿者 GN⁺ 2025-12-02 | 2件のコメント | WhatsAppで共有
  • Ghostty-webはブラウザで実行されるVT100互換のターミナルエミュレーターで、xterm.js APIと同様の方法で使用できる
  • WASMでコンパイルされたGhosttyパーサーを用いて、ネイティブアプリと同じコードベースを提供し、ランタイム依存は不要
  • 既存のxterm.jsプロジェクトは、@xterm/xtermをghostty-webに置き換えるだけで移行可能
  • 複雑なスクリプト描画とXTPUSHSGR/XTPOPSGRシーケンスサポートなどで、xterm.jsより正確な処理を提供
  • ブラウザベースの開発環境やクラウドIDEなどで、高性能ターミナル実装を簡素化できるツール

概要

  • ghostty-webはGhosttyのターミナルエミュレーターをWeb環境へ移植したプロジェクトで、xterm.js API互換性を維持している
    • ブラウザ上で正確なVT100実装を提供
    • 既存のxterm.jsユーザーが簡単に移行可能
  • WASMでコンパイルされたGhosttyパーサーを使用しており、ネイティブアプリと同一のコードを実行
    • ランタイム依存は不要で、約400KBのWASMバンドルで構成
  • 当初はMux（分離された並列開発用デスクトップアプリ）向けに作られたが、あらゆる環境で利用可能

デモと実行

  • ライブデモはghostty.ondis.coで試すことができる
  • ローカル環境では次のコマンドで実行可能 
    npx @ghostty-web/demo@next

xterm.jsとの比較

  • xterm.jsはVS CodeやHyperなど様々な環境で使用されるが、レンダリングの問題や未対応機能がある
    • **複雑なスクリプト（デーヴァナーガリー、アラビア語など）**の処理時にレンダリングエラーが発生
    • XTPUSHSGR/XTPOPSGRシーケンス非対応
  • ghostty-webは上記の問題を解消し、正確なgrapheme処理とすべてのシーケンス対応を提供
  • xterm.jsがJavaScriptで全エミュレーションを再実装したのに対し、ghostty-webは検証済みネイティブのGhosttyコードをそのまま利用

インストールと使い方

  • インストールコマンド 
    npm install ghostty-web
  • xterm.jsと同じAPIで利用可能 
    import { init, Terminal } from 'ghostty-web';  
await init();  
const term = new Terminal({ fontSize: 14, theme: { background: '#1a1b26', foreground: '#a9b1d6' } });  
term.open(document.getElementById('terminal'));  
term.onData((data) => websocket.send(data));  
websocket.onmessage = (e) => term.write(e.data);
  • クライアント-サーバー通信の例はdemo/index.htmlを参照

開発とビルド

  • Ghosttyソースからビルドし、追加機能公開用パッチ（ghostty-wasm-api.patch）を含む
  • ZigとBunが必要 
    bun run build
  • Ghostty開発者のMitchell Hashimotoが開発中のlibghosttyのおかげでパッチ規模は小さい
  • 将来的に公式のGhostty WASM配布版を基盤として、xterm.js互換APIを維持する予定
  • このプロジェクトはCoderチームがGhosttyをサポートしながら開発している

ライセンス

  • MITライセンスが適用

関連記事

2件のコメント

 
GN⁺ 2025-12-02
Hacker Newsの意見
  • 本当に驚いた。Kyleがこんなものを作っているとは知らなかった
    パッチがとても有益で、自分がどこを手伝うべきかが明確になった
    今のところ性能はxtermより良くはない気がする。viewportの扱い方がやや高コストに見えるため
    もしかしてベンチマークは取ってみたのだろうか
    新しいRenderState APIを使うとよさそう。現在は行単位でデータを取得しているが、これは遅い。RenderState APIは状態ベースの高性能な差分レンダリングをサポートしている
    実際のGPUレンダラーもこのAPIの上で動いている。どんなレンダラーにも対応できる
    こうした初期段階でもxterm.jsとの性能比較が気になる。素晴らしい仕事だ
    • まだ性能にはあまり時間をかけていない。今は**POC(Proof of Concept)**レベル
      長期的にはxterm.jsのdrop-in置き換えになってほしい
      近いうちにRenderState APIへ移行して、ベンチマークを共有する予定
      思っていたより簡単に実装できて驚いた
  • 自分も似たようなものを作った。ghostty-vtを使って別のターミナルの中でTUIアプリを実行できるようにした
    opentuiでTMUXのような機能を実装するために使っている
    ANSIレンダリングはopencode内で処理する予定
    ghostty-opentuiプロジェクトリンク
  • 「ブラウザでの本物のVT100実装」という表現は興味深い
    Ghosttyも結局は別の言語で実装されたエミュレーションではないのか？ 少し大げさな表現に感じる
    • ターミナルはもともとエミュレーターだ。この理屈だと現代のターミナルはすべて一種の近似ということになる
      ただ、VT仕様との互換性の水準がより高いものがあるだけだ
    • 同意する。なのでREADMEから「not a JavaScript approximation」という文言は削除した
  • macOSでGhosttyとfzyを使ってApple Notesのタイトルをファジー検索するアプリを作った
    かなりうまく動いている
    hot-notesプロジェクトリンク
  • Wasmerを使ってオンラインデモを作った。誰でも簡単に実行できる（cowsay helloを入力してみてほしい）
    デモリンク
    ローカルで実行するには以下のようにすればよい 
    npx @ghostty-web/demo@next
# または
wasmer run wasmer/ghostty-web
-> http://localhost:8080/ にアクセス
    ソースコードはwebassembly.shで確認できる。xtermからghostty-webへの移行も問題なく行える
    • Chromeではうまく動くが、Firefox(v145.0.2)では動作しない
    • ChromeのJSデバッガーで複数のエラーが見え、cowsay helloやlsコマンドも出力されない
    • 素晴らしいデモだ。ありがとう
  • Ghosttyは本当に素晴らしい。MacとLinuxの両方でネイティブに動作しつつ、クロスプラットフォームでもある
    コアが独特な言語で書かれているにもかかわらず、Macアプリのように安定して動作する。デザインも素晴らしい
    • libghosttyは本当に優秀だ。自分はこれをターミナルセッション復元ツールで使っている
      ユーザーがセッションに再接続すると、ghosttyでターミナルの状態と出力をレンダリングする
      実質1k LoCのtmux-liteだ
      zmxプロジェクトリンク
    • macOSでテキスト検索機能とマルチタブ対応さえ追加されれば完璧だと思う
  • 新しいvt100実装を見るたびに楽しくなる
    今はUnreal Engine 5の中で動く自分のバージョンを作っているところだ
    スクリーンショット集
    Claudeと一緒にUE5 Editorタブ内でコーディングするのはかなり楽しい。Remote Control APIを通じてアバター操作やスクリーンショット撮影なども可能。3Dゲームのデバッグに役立つ
    ClaudeはHyperspace GLSLシェーダーも作ってくれるが、スクリーンショットの表ヘッダーはうまく合わせられない
    • ClaudeがUE Editorとどう相互作用しているのか気になる。MCP経由でRemote Control APIを使っているのか？
  • 素晴らしい仕事だ、Kyle！
    webassembly.shを追加すれば、ブラウザ内でパッケージのインストールまで可能な完全なシェル環境になりそうだ
    • もっと改善されたデモのために、そのようにする予定
      今はコマンドラインからしか実行できず、UXが物足りない
  • これで誰かがVisual Studio Code（特にcode-server）にghostty-webをターミナルとして統合できるかもしれない？
    • その通り、まさにそれが目標だ
  • coderチームが本当に好きだ。素晴らしい製品だ。Kylecarbsとチームに感謝する
    • ユーザーとしてありがとう