4 puntos por GN⁺ 2025-12-02 | 2 comentarios | Compartir por WhatsApp
  • Ghostty-web es un emulador de terminal compatible con VT100 que se ejecuta en el navegador y puede usarse de la misma manera que la API de xterm.js.
  • Utiliza un parser de Ghostty compilado en WASM, lo que ofrece la misma base de código que la app nativa y no tiene dependencias en tiempo de ejecución.
  • Los proyectos existentes de xterm.js pueden migrarse simplemente cambiando @xterm/xterm por ghostty-web.
  • Proporciona un manejo más preciso que xterm.js en renderizado de scripts complejos y en soporte de secuencias XTPUSHSGR/XTPOPSGR, entre otros.
  • Es una herramienta para simplificar la implementación de terminales de alto rendimiento en entornos de desarrollo basados en navegador o IDEs en la nube.

Descripción general

  • ghostty-web es un proyecto que trae el emulador de terminal de Ghostty al entorno web, manteniendo la compatibilidad con la API de xterm.js.
    • Proporciona una implementación precisa de VT100 en el navegador.
    • Los usuarios actuales de xterm.js pueden migrar sin complicaciones.
  • Utiliza el parser de Ghostty compilado a WASM, ejecutando el mismo código que una app nativa.
    • Sin dependencias en tiempo de ejecución, con un bundle WASM de aprox. 400 KB.
  • Fue creado originalmente para Mux (una app de escritorio para desarrollo paralelo aislado), pero puede usarse en distintos entornos.

Demo y ejecución

  • La demo en vivo está disponible en ghostty.ondis.co.
  • En local se puede ejecutar con el siguiente comando:
    npx @ghostty-web/demo@next
    

Comparación con xterm.js

  • xterm.js se usa en entornos como VS Code y Hyper, entre otros, pero tiene problemas de renderizado y falta de soporte de funciones.
    • Se producen errores de renderizado al procesar escrituras complejas (como Devanagari, árabe, etc.).
    • No soporta las secuencias XTPUSHSGR/XTPOPSGR.
  • ghostty-web corrige estos problemas ofreciendo un manejo preciso de graphemes y soporte completo de secuencias.
  • Mientras xterm.js reimplementa toda la emulación en JavaScript, ghostty-web usa directamente el código nativo de Ghostty ya validado.

Instalación y uso

  • Comando de instalación:
    npm install ghostty-web
    
  • Puede usarse con la misma 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);
    
  • Consulta demo/index.html para ver un ejemplo de comunicación cliente-servidor.

Desarrollo y compilación

  • Se compila desde el código fuente de Ghostty y se incluye el parche (ghostty-wasm-api.patch) para exponer funciones adicionales.
  • Requiere Zig y Bun:
    bun run build
    
  • Gracias a libghostty, que Mitchell Hashimoto está desarrollando para Ghostty, el parche es de pequeño alcance.
  • En el futuro se espera mantener la compatibilidad con la API compatible con xterm.js basada en la distribución oficial de Ghostty WASM.
  • El proyecto lo desarrolla el equipo de Coder mostrando apoyo a Ghostty.

Licencia

  • Licencia MIT aplicada.

2 comentarios

 
GN⁺ 2025-12-02
Opiniones de Hacker News
  • Realmente sorprendente. No sabía que Kyle estaba haciendo algo así
    El parche es muy útil, así que me dejó claro en qué partes podría ayudar
    No creo que por ahora el rendimiento sea mejor que xterm, porque la forma en que maneja el viewport se ve algo costosa
    Me pregunto si ya hicieron algún benchmark
    Creo que sería bueno usar la nueva RenderState API. Ahora mismo obtiene los datos por filas, y eso es lento. La RenderState API permite renderizado delta de alto rendimiento basado en estado
    El renderizador real de GPU también funciona sobre esta API. Es compatible con cualquier renderizador
    Incluso en esta etapa temprana me da curiosidad compararlo en rendimiento con xterm.js. Gran trabajo
    • Todavía no le he dedicado mucho tiempo al rendimiento. Por ahora está a nivel de POC (Proof of Concept)
      A largo plazo espero que llegue a ser un reemplazo drop-in de xterm.js
      Pronto voy a cambiar a la RenderState API y compartir benchmarks
      Me sorprendió que fuera más fácil de implementar de lo que esperaba
  • Yo también hice algo parecido. Usé ghostty-vt para poder ejecutar apps TUI dentro de otro terminal
    Lo uso en opentui para implementar funciones tipo TMUX
    Planeo manejar el renderizado ANSI dentro de opencode
    Enlace al proyecto ghostty-opentui
  • La frase “implementación VT100 real en el navegador” me parece interesante
    ¿Ghostty no es al final también una emulación implementada en otro lenguaje? Suena un poco exagerado
    • Un terminal es por naturaleza un emulador. Con esa lógica, todos los terminales modernos serían algún tipo de aproximación
      La diferencia es que algunos tienen un nivel de compatibilidad más alto con la especificación VT
    • De acuerdo. Por eso eliminé la frase “not a JavaScript approximation” del README
  • En macOS hice una app que usa Ghostty y fzy para hacer búsqueda difusa de títulos de Apple Notes
    Funciona bastante bien
    Enlace al proyecto hot-notes
  • Hice una demo en línea usando Wasmer. Cualquiera puede ejecutarla fácilmente (prueben escribir cowsay hello)
    Enlace a la demo
    Para ejecutarlo en local, se puede hacer así
    npx @ghostty-web/demo@next
    # o
    wasmer run wasmer/ghostty-web
    -> abrir http://localhost:8080/
    
    El código fuente se puede ver en webassembly.sh. La migración de xterm a ghostty-web fue bastante fluida
    • En Chrome funciona bien, pero en Firefox (v145.0.2) no funciona
    • En el depurador JS de Chrome aparecen varios errores, y comandos como cowsay hello o ls no muestran salida
    • Excelente demo. Gracias
  • Ghostty es realmente excelente. Funciona de forma nativa tanto en Mac como en Linux y aun así es multiplataforma
    Aunque su núcleo está escrito en un lenguaje poco común, funciona con la estabilidad de una app de Mac. El diseño también es excelente
    • libghostty es realmente sobresaliente. Yo la uso en una herramienta para restaurar sesiones de terminal
      Cuando el usuario se reconecta a una sesión, renderizo el estado y la salida del terminal con ghostty
      Es básicamente un tmux-lite de 1k LoC
      Enlace al proyecto zmx
    • En macOS sería perfecto si solo le agregaran búsqueda de texto y soporte para múltiples pestañas
  • Siempre me da gusto ver una nueva implementación de vt100
    Ahora mismo estoy haciendo mi propia versión que funciona dentro de Unreal Engine 5
    Galería de capturas
    Es bastante divertido programar dentro de una pestaña del editor de UE5 junto con Claude. También puedo controlar avatares, tomar capturas, etc., a través de la Remote Control API. Es útil para depurar juegos 3D
    Claude también me genera shaders GLSL de Hyperspace, aunque no logra alinear bien los encabezados de tablas en las capturas
    • Me da curiosidad cómo Claude interactúa con el editor de UE. ¿Usa la Remote Control API a través de MCP?
  • ¡Gran trabajo, Kyle!
    Si agregan webassembly.sh, podría convertirse en un entorno de shell completo dentro del navegador, incluyendo instalación de paquetes
    • Sí, ese es el plan para una demo mucho mejor
      Por ahora solo se puede ejecutar desde la línea de comandos, así que la UX queda algo limitada
  • Entonces ahora alguien podría integrar ghostty-web como terminal dentro de Visual Studio Code (especialmente code-server), ¿no?
    • Exacto, ese es justo el objetivo
  • Me gusta mucho el equipo de coder. Gran producto. Gracias a Kylecarbs y al equipo
    • Gracias por usarlo