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

• 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  
  

  • Führe eine echte Shell auf http://localhost:8080 aus
  • Läuft optimal unter Linux und macOS

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