ghostty-web - Un terminal web compatible avec l'API xterm.js, compilé en WASM depuis Ghostty

 (github.com/coder)
4 points par GN⁺ 2025-12-02 | 2 commentaires | Partager sur WhatsApp
  • Ghostty-web est un émulateur de terminal compatible VT100 qui s'exécute dans le navigateur, et peut être utilisé de la même manière que l'API xterm.js.
  • Il utilise un parseur Ghostty compilé en WASM pour fournir une base de code identique à l'application native, avec aucune dépendance runtime.
  • Les projets xterm.js existants peuvent migrer en remplaçant simplement @xterm/xterm par ghostty-web.
  • Il offre un traitement plus précis que xterm.js pour le rendu de scripts complexes et le support de séquences comme XTPUSHSGR/XTPOPSGR.
  • Un outil qui permet de simplifier la mise en place d'un terminal haute performance dans des environnements de développement basés sur navigateur ou des IDE cloud.

Aperçu

  • ghostty-web est un projet qui transpose l'émulateur de terminal de Ghostty vers le web, tout en conservant la compatibilité avec l'API xterm.js.
    • Il fournit une implémentation précise de VT100 dans le navigateur.
    • Les utilisateurs de xterm.js peuvent basculer facilement.
  • Il utilise le parseur Ghostty compilé en WASM, avec une exécution basée sur le même code que l'application native.
    • Aucune dépendance runtime, et un bundle WASM d'environ 400 Ko.
  • Initialement conçu pour Mux (une application de bureau pour le développement isolé en parallèle), il peut être utilisé dans différents environnements.

Démo et exécution

  • Une démo en direct est disponible sur ghostty.ondis.co.
  • En local, il peut être lancé avec la commande suivante 
    npx @ghostty-web/demo@next

Comparaison avec xterm.js

  • xterm.js est utilisé dans VS Code, Hyper et d'autres environnements, mais il présente des problèmes de rendu et de fonctionnalités non prises en charge.
    • Des erreurs de rendu peuvent apparaître avec des scripts complexes (Devanagari, arabe, etc.)
    • Non prise en charge des séquences XTPUSHSGR/XTPOPSGR
  • ghostty-web corrige ces problèmes en offrant un traitement précis des graphèmes et une prise en charge complète des séquences.
  • Alors que xterm.js réimplémente toute l'émulation en JavaScript, ghostty-web utilise directement le code natif éprouvé de Ghostty.

Installation et utilisation

  • Commande d'installation 
    npm install ghostty-web
  • Utilisation avec la même API que 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);
  • Pour un exemple de communication client–serveur, voir demo/index.html.

Développement et build

  • Construit à partir des sources de Ghostty, avec un patch pour exposer des fonctionnalités supplémentaires (ghostty-wasm-api.patch).
  • Zig et Bun sont requis 
    bun run build
  • Grâce à libghostty, développé par le créateur de Ghostty, Mitchell Hashimoto, le nombre de modifications reste réduit.
  • À terme, le projet prévoit de s'appuyer sur une distribution officielle WASM de Ghostty, tout en conservant la compatibilité avec l'API xterm.js.
  • Le projet est développé avec le soutien de l'équipe Coder pour Ghostty.

Licence

  • Licence MIT

À lire aussi

2 commentaires

 
GN⁺ 2025-12-02
Commentaire sur Hacker News
  • Vraiment impressionnant. Je ne savais pas que Kyle travaillait sur ça
    Le patch est très instructif, donc il m’a permis de voir clairement où je pourrais aider
    Je ne pense pas que les performances soient meilleures que celles de xterm pour l’instant. La manière dont le viewport est géré semble un peu coûteuse
    Je me demande si vous avez fait des benchmarks
    Je pense qu’il vaudrait mieux utiliser la nouvelle API RenderState. Actuellement, les données sont récupérées ligne par ligne, et c’est lent. L’API RenderState est basée sur l’état et permet un rendu delta haute performance
    Le véritable moteur de rendu GPU fonctionne aussi au-dessus de cette API. Elle est compatible avec n’importe quel moteur de rendu
    Même à ce stade précoce, je serais curieux de voir une comparaison de performances avec xterm.js. Excellent travail
    • Je n’ai pas encore consacré beaucoup de temps aux performances. Pour le moment, c’est au niveau d’une POC (Proof of Concept)
      À long terme, j’aimerais que ce soit un remplaçant drop-in de xterm.js
      Je vais bientôt passer à l’API RenderState et partager des benchmarks
      J’ai été surpris de voir à quel point c’était plus simple à implémenter que je ne le pensais
  • J’ai aussi fait quelque chose de similaire. J’utilise ghostty-vt pour pouvoir exécuter des applications TUI à l’intérieur d’un autre terminal
    Je m’en sers dans opentui pour implémenter des fonctionnalités de type TMUX
    Je prévois de gérer le rendu ANSI dans opencode
    Lien du projet ghostty-opentui
  • La formule « véritable implémentation de VT100 dans le navigateur » est intrigante
    Ghostty n’est-il pas, au fond, lui aussi une émulation implémentée dans un autre langage ? Ça me semble un peu exagéré
    • Un terminal est à l’origine un émulateur. Avec cette logique, tous les terminaux modernes sont une forme d’approximation
      La différence, c’est simplement que certains ont un niveau de compatibilité plus élevé avec la spécification VT
    • Je suis d’accord. J’ai donc supprimé la mention « not a JavaScript approximation » du README
  • J’ai créé sur macOS une application qui utilise Ghostty et fzy pour faire une recherche floue dans les titres d’Apple Notes
    Ça marche plutôt bien
    Lien du projet hot-notes
  • J’ai créé une démo en ligne avec Wasmer. N’importe qui peut l’exécuter facilement (essayez de saisir cowsay hello)
    Lien vers la démo
    Pour l’exécuter en local, il suffit de faire comme ci-dessous 
    npx @ghostty-web/demo@next
# ou
wasmer run wasmer/ghostty-web
-> ouvrir http://localhost:8080/
    Le code source est disponible sur webassembly.sh. La transition de xterm vers ghostty-web se fait sans difficulté
    • Ça marche bien dans Chrome, mais pas dans Firefox (v145.0.2)
    • Plusieurs erreurs apparaissent dans le débogueur JS de Chrome, et les commandes cowsay hello ou ls n’affichent rien
    • Super démo. Merci
  • Ghostty est vraiment excellent. C’est natif à la fois sur Mac et Linux tout en restant cross-platform
    Le cœur est écrit dans un langage inhabituel, mais l’application fonctionne de façon très stable comme une vraie app Mac. Le design est aussi excellent
    • libghostty est vraiment remarquable. Je l’utilise dans un outil de restauration de sessions terminal
      Quand l’utilisateur se reconnecte à une session, j’utilise ghostty pour restituer l’état du terminal et la sortie
      C’est en pratique un tmux-lite de 1k LoC
      Lien du projet zmx
    • Ce serait parfait sur macOS s’il y avait en plus la recherche de texte et le support multi-onglets
  • Je me réjouis à chaque fois que je vois une nouvelle implémentation de vt100
    En ce moment, je suis en train de faire ma propre version qui tourne dans Unreal Engine 5
    Collection de captures d’écran
    Coder avec Claude dans un onglet de l’éditeur UE5 est assez amusant. Via la Remote Control API, on peut aussi piloter un avatar, prendre des captures d’écran, etc. C’est utile pour déboguer des jeux 3D
    Claude peut aussi générer des shaders GLSL Hyperspace, mais il n’arrive pas à bien aligner les en-têtes de tableau dans les captures d’écran
    • Je me demande comment Claude interagit avec l’éditeur UE. Est-ce qu’il utilise la Remote Control API via MCP ?
  • Beau travail Kyle !
    En ajoutant webassembly.sh, on pourrait en faire un environnement shell complet capable d’installer des paquets dans le navigateur
    • C’est prévu pour une démo bien meilleure
      Pour l’instant, ça ne fonctionne qu’en ligne de commande, donc l’UX laisse à désirer
  • Maintenant, quelqu’un pourrait peut-être intégrer ghostty-web comme terminal dans Visual Studio Code (en particulier code-server) ?
    • Oui, c’est exactement l’objectif
  • J’aime vraiment beaucoup l’équipe de coder. Excellent produit. Merci à Kylecarbs et à l’équipe
    • Merci, en tant qu’utilisateur