ghostty-web - Ghostty als WASM kompiliert: ein mit der xterm.js-API kompatibles Webterminal

 (github.com/coder)
4 Punkte von GN⁺ 2025-12-02 | 2 Kommentare | Auf WhatsApp teilen
  • Ghostty-web ist ein im Browser ausgeführter VT100-kompatibler Terminal-Emulator, der wie die xterm.js-API genutzt werden kann
  • Es nutzt einen mit WASM kompilierten Ghostty-Parser und bietet damit dieselbe Codebasis wie die native App, außerdem keine Laufzeit-Abhängigkeiten
  • Bestehende xterm.js-Projekte lassen sich migrieren, indem man lediglich @xterm/xterm durch ghostty-web ersetzt
  • Bei der Verarbeitung von komplexem Skript-Rendering und der Unterstützung von XTPUSHSGR/XTPOPSGR-Sequenzen wird die Verarbeitung genauer als bei xterm.js bereitgestellt
  • Ein Werkzeug, mit dem sich die Implementierung eines leistungsfähigen Terminals für browserbasierte Entwicklungsumgebungen oder Cloud-IDEs vereinfachen lässt

Überblick

  • ghostty-web ist ein Projekt, das den Terminal-Emulator von Ghostty in die Web-Umgebung portiert und dabei die xterm.js-API-Kompatibilität beibehält
    • Bietet eine exakte VT100-Implementierung im Browser
    • Bestehende xterm.js-Nutzer können problemlos wechseln
  • Es verwendet einen mit WASM kompilierten Ghostty-Parser und führt denselben Code wie die native App aus
    • Keine Laufzeit-Abhängigkeiten, bestehend aus einem etwa 400 KB großen WASM-Bundle
  • Ursprünglich für Mux (eine Desktop-App für isolierte parallele Entwicklung) entwickelt, ist es für verschiedene Umgebungen einsetzbar

Demo und Ausführung

  • Eine Live-Demo ist unter ghostty.ondis.co verfügbar
  • Lokal kann es mit dem folgenden Befehl ausgeführt werden 
    npx @ghostty-web/demo@next

Vergleich mit xterm.js

  • xterm.js wird in verschiedenen Umgebungen wie VS Code oder Hyper eingesetzt, weist jedoch Rendering-Probleme und fehlende Funktionen auf
    • Bei der Verarbeitung von komplexen Skripten wie Devanagari, Arabisch usw. treten Renderfehler auf
    • XTPUSHSGR/XTPOPSGR-Sequenzen werden nicht unterstützt
  • ghostty-web behebt diese Probleme und bietet präzise Grapheme-Verarbeitung sowie vollständige Sequenzunterstützung
  • Während xterm.js alle Emulatorfunktionen in JavaScript neu implementiert, verwendet ghostty-web direkt den bewährten nativen Ghostty-Code

Installation und Verwendung

  • Installationsbefehl 
    npm install ghostty-web
  • Verwendung mit derselben API wie xterm.js 
    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);
  • Beispiel für die Client-Server-Kommunikation: siehe demo/index.html

Entwicklung und Build

  • Build erfolgt aus den Ghostty-Quellen mit eingebautem Patch (ghostty-wasm-api.patch) zur Freigabe zusätzlicher Features
  • Zig und Bun sind erforderlich 
    bun run build
  • Die Patchgröße bleibt gering, weil Mitchell Hashimoto, der Ghostty-Entwickler, libghostty bereitstellt
  • Künftig soll die xterm.js-kompatible API auf Basis der offiziellen Ghostty-WASM-Distribution beibehalten werden
  • Das Projekt wurde von Coder entwickelt, wobei das Team seine Unterstützung für Ghostty bekundet hat

Lizenz

  • MIT-Lizenz

Verwandte Beiträge

2 Kommentare

 
GN⁺ 2025-12-02
Hacker-News-Kommentare
  • Wirklich beeindruckend. Ich wusste nicht, dass Kyle an so etwas arbeitet
    Der Patch ist sehr aufschlussreich, sodass klar geworden ist, wobei ich helfen sollte
    Ich vermute, die Performance ist derzeit nicht besser als bei xterm, weil die Art, wie der Viewport erfasst wird, etwas teuer aussieht
    Ich frage mich, ob ihr schon Benchmarks gemacht habt
    Es wäre vermutlich gut, die neue RenderState API zu verwenden. Aktuell werden die Daten zeilenweise geholt, und das ist langsam. Die RenderState API unterstützt zustandsbasiertes High-Performance-Delta-Rendering
    Der eigentliche GPU-Renderer läuft ebenfalls auf dieser API. Sie ist mit jedem Renderer kompatibel
    Mich würde selbst in diesem frühen Stadium ein Performance-Vergleich mit xterm.js interessieren. Großartige Arbeit
    • Ich habe bisher noch nicht viel Zeit in die Performance investiert. Im Moment ist es eher auf POC-(Proof-of-Concept-)Niveau
      Langfristig hoffe ich, dass es ein Drop-in-Ersatz für xterm.js wird
      Ich werde bald auf die RenderState API umstellen und Benchmarks teilen
      Ich war überrascht, wie einfach sich das umsetzen ließ
  • Ich habe auch etwas Ähnliches gebaut. Mit ghostty-vt kann ich TUI-Apps in einem anderen Terminal ausführen
    Ich nutze es, um in opentui Funktionen ähnlich wie bei TMUX umzusetzen
    Das ANSI-Rendering soll in opencode verarbeitet werden
    Link zum ghostty-opentui-Projekt
  • Die Formulierung „eine echte VT100-Implementierung im Browser“ ist interessant
    Ist Ghostty am Ende nicht auch nur eine Emulation, die in einer anderen Sprache implementiert ist? Das wirkt etwas übertrieben
    • Ein Terminal ist von Natur aus ein Emulator. Nach dieser Logik sind alle modernen Terminals eine Art Annäherung
      Manche haben lediglich ein höheres Maß an Kompatibilität mit der VT-Spezifikation
    • Stimme zu. Deshalb habe ich im README die Formulierung „not a JavaScript approximation“ entfernt
  • Ich habe auf macOS eine App gebaut, die mit Ghostty und fzy die Titel in Apple Notes per Fuzzy Search durchsucht
    Funktioniert ziemlich gut
    Link zum hot-notes-Projekt
  • Mit Wasmer habe ich eine Online-Demo gebaut. Jeder kann sie leicht ausprobieren (cowsay hello eingeben)
    Link zur Demo
    Um es lokal auszuführen, geht es so 
    npx @ghostty-web/demo@next
# oder
wasmer run wasmer/ghostty-web
-> http://localhost:8080/ 접속
    Den Quellcode gibt es unter webassembly.sh. Der Wechsel von xterm zu ghostty-web verlief problemlos
    • In Chrome funktioniert es gut, aber in Firefox (v145.0.2) läuft es nicht
    • Im Chrome-JS-Debugger erscheinen mehrere Fehler, und Befehle wie cowsay hello oder ls geben nichts aus
    • Tolle Demo. Danke
  • Ghostty ist wirklich großartig. Es läuft nativ auf Mac und Linux und ist trotzdem plattformübergreifend
    Obwohl der Kern in einer ungewöhnlichen Sprache geschrieben ist, läuft es so stabil wie eine Mac-App. Auch das Design ist hervorragend
    • libghostty ist wirklich stark. Ich verwende es gerade für ein Tool zur Wiederherstellung von Terminal-Sitzungen
      Wenn sich ein Nutzer erneut mit einer Sitzung verbindet, rendert ghostty den Terminalzustand und die Ausgabe
      Im Grunde ist das ein tmux-lite mit 1k LoC
      Link zum zmx-Projekt
    • Es wäre perfekt, wenn unter macOS noch Textsuche und Multi-Tab-Unterstützung dazukämen
  • Ich freue mich jedes Mal, wenn ich eine neue vt100-Implementierung sehe
    Derzeit baue ich meine Version, die in Unreal Engine 5 läuft
    Screenshot-Sammlung
    Es macht ziemlich viel Spaß, mit Claude direkt in einem UE5-Editor-Tab zu programmieren. Über die Remote Control API kann man auch Avatare steuern, Screenshots aufnehmen usw. Das ist nützlich für das Debugging von 3D-Spielen
    Claude kann auch Hyperspace-GLSL-Shader erzeugen, bekommt aber Tabellenüberschriften in Screenshots nicht sauber hin
    • Mich würde interessieren, wie Claude mit dem UE Editor interagiert. Nutzt es die Remote Control API über MCP?
  • Tolle Arbeit, Kyle!
    Wenn webassembly.sh hinzugefügt wird, könnte das eine vollständige Shell-Umgebung werden, in der man sogar Pakete direkt im Browser installieren kann
    • Das ist für eine deutlich verbesserte Demo geplant
      Im Moment läuft es nur über die Kommandozeile, was der UX nicht guttut
  • Jetzt könnte jemand ghostty-web vielleicht als Terminal in Visual Studio Code integrieren, besonders in code-server?
    • Genau, das ist das Ziel
  • Ich mag das coder-Team wirklich sehr. Ein großartiges Produkt. Danke an Kylecarbs und das Team
    • Danke, das freut uns als Nutzer