4 pontos por GN⁺ 2025-12-02 | 2 comentários | Compartilhar no WhatsApp
  • Ghostty-web é um emulador de terminal compatível com VT100 que roda no navegador e pode ser usado de maneira idêntica à API do xterm.js
  • Usa um parser do Ghostty compilado para WASM para oferecer a mesma base de código de apps nativos, com zero dependência de runtime
  • Projetos existentes no xterm.js podem ser migrados trocando apenas @xterm/xterm por ghostty-web
  • Fornece processamento mais preciso que o xterm.js em renderização de scripts complexos e no suporte às sequências XTPUSHSGR/XTPOPSGR, entre outras
  • É uma ferramenta para simplificar a implementação de terminais de alto desempenho em ambientes de desenvolvimento no navegador ou em IDEs em nuvem

Visão geral

  • ghostty-web é um projeto que leva o emulador de terminal do Ghostty para o ambiente web, mantendo compatibilidade com a API do xterm.js
    • Fornece uma implementação VT100 precisa no navegador
    • Usuários atuais do xterm.js conseguem migrar facilmente
  • Utiliza um parser do Ghostty compilado para WASM, executando o mesmo código do app nativo
    • Sem dependências de runtime, com um pacote WASM de aproximadamente 400 KB
  • Embora tenha sido criado originalmente para o Mux (um app desktop para desenvolvimento paralelo isolado), está disponível para uso em diversos ambientes

Demonstração e execução

  • A demonstração ao vivo pode ser usada em ghostty.ondis.co
  • Em ambiente local, execute o comando abaixo
    npx @ghostty-web/demo@next  
    

Comparação com xterm.js

  • O xterm.js é usado em diferentes ambientes, como VS Code e Hyper, mas ainda apresenta problemas de renderização e ausência de suporte a recursos
    • Ocorreram erros de renderização ao processar scripts complexos (devanágari, árabe etc.)
    • Não há suporte às sequências XTPUSHSGR/XTPOPSGR
  • ghostty-web resolve esses problemas, oferecendo processamento preciso de grapheme e suporte a sequências completas
  • Enquanto o xterm.js reimplementa toda a emulação em JavaScript, o ghostty-web usa diretamente o código nativo comprovado do Ghostty

Instalação e uso

  • Comando de instalação
    npm install ghostty-web  
    
  • Pode ser usado com a mesma API do 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);  
    
  • Para um exemplo de comunicação cliente-servidor, consulte demo/index.html

Desenvolvimento e build

  • Faz build a partir do código-fonte do Ghostty e inclui um patch (ghostty-wasm-api.patch) para expor mais funcionalidades
  • Zig e Bun são necessários
    bun run build  
    
  • Graças ao libghostty desenvolvido por Mitchell Hashimoto, autor do Ghostty, o patch é pequeno
  • A previsão é manter a compatibilidade com API do xterm.js com base em uma futura distribuição oficial do Ghostty em WASM
  • O projeto está sendo desenvolvido pela equipe da Coder, com apoio ao Ghostty

Licença

  • Licença MIT aplicada

2 comentários

 
GN⁺ 2025-12-02
Comentário no Hacker News
  • Realmente impressionante. Eu não sabia que o Kyle estava fazendo isso
    O patch foi muito útil, então ficou claro onde eu poderia ajudar
    Acho que o desempenho ainda não deve estar melhor que o do xterm, porque a forma como ele lida com a viewport parece um pouco cara
    Fico curioso se você já fez algum benchmark
    Acho que seria melhor usar a nova API RenderState. Atualmente os dados são obtidos linha por linha, e isso é lento. A API RenderState suporta renderização delta de alto desempenho baseada em estado
    O renderizador real de GPU também funciona sobre essa API. Ela é compatível com qualquer renderizador
    Mesmo neste estágio inicial, tenho curiosidade sobre a comparação de desempenho com o xterm.js. Ótimo trabalho
    • Ainda não dediquei muito tempo ao desempenho. No momento, está mais no nível de POC (Proof of Concept)
      No longo prazo, espero que se torne um substituto drop-in do xterm.js
      Em breve vou migrar para a API RenderState e compartilhar benchmarks
      Fiquei surpreso com como foi fácil implementar
  • Eu também fiz algo parecido. Usei o ghostty-vt para poder executar apps TUI dentro de outro terminal
    Estou usando isso no opentui para implementar recursos tipo TMUX
    Pretendo fazer a renderização ANSI dentro do opencode
    Link do projeto ghostty-opentui
  • A expressão “implementação VT100 de verdade no navegador” é interessante
    No fim das contas, o Ghostty também não é apenas uma emulação implementada em outra linguagem? Parece um pouco exagerado
    • Terminais são, por natureza, emuladores. Seguindo essa lógica, todo terminal moderno é uma espécie de aproximação
      A diferença é que alguns têm um nível de compatibilidade maior com a especificação VT
    • Concordo. Por isso removi a frase “not a JavaScript approximation” do README
  • No macOS, fiz um app que usa Ghostty e fzy para fazer busca fuzzy em títulos do Apple Notes
    Funciona bem
    Link do projeto hot-notes
  • Fiz uma demo online usando Wasmer. Qualquer um pode testar facilmente (experimente digitar cowsay hello)
    Link da demo
    Para executar localmente, faça assim
    npx @ghostty-web/demo@next
    # ou
    wasmer run wasmer/ghostty-web
    -> acesse http://localhost:8080/
    
    O código-fonte pode ser visto em webassembly.sh. A transição de xterm para ghostty-web acontece sem problemas
    • Funciona bem no Chrome, mas não roda no Firefox (v145.0.2)
    • Vejo vários erros no depurador JS do Chrome, e comandos como cowsay hello ou ls não produzem saída
    • Demo excelente. Obrigado
  • O Ghostty é realmente excelente. É nativo tanto no Mac quanto no Linux e ainda assim é cross-platform
    Embora o núcleo seja escrito em uma linguagem incomum, ele funciona com a estabilidade de um app de Mac. O design também é ótimo
    • O libghostty é realmente excelente. Estou usando isso em uma ferramenta de restauração de sessões de terminal
      Quando o usuário se reconecta à sessão, uso o ghostty para renderizar o estado e a saída do terminal
      Na prática, é um tmux-lite de 1k LoC
      Link do projeto zmx
    • No macOS, acho que ficaria perfeito se adicionassem busca de texto e suporte a múltiplas abas
  • Fico feliz sempre que vejo uma nova implementação de VT100
    Agora estou fazendo minha própria versão rodando dentro da Unreal Engine 5
    Coleção de screenshots
    Codar dentro de uma aba do UE5 Editor junto com o Claude é bem divertido. Também dá para controlar avatares, tirar screenshots etc. pela Remote Control API. É útil para depurar jogos 3D
    O Claude também cria shaders GLSL de hyperspace, mas não consegue alinhar corretamente os cabeçalhos da tabela no screenshot
    • Fiquei curioso sobre como o Claude interage com o UE Editor. Ele usa a Remote Control API via MCP?
  • Ótimo trabalho, Kyle!
    Se adicionar webassembly.sh, parece que isso pode virar um ambiente de shell completo no navegador, capaz até de instalar pacotes
    • É isso que pretendo fazer para uma demo muito melhor
      No momento, só dá para rodar pela linha de comando, então a UX deixa a desejar
  • Então agora alguém talvez possa integrar o ghostty-web como terminal no Visual Studio Code (especialmente no code-server)?
    • Sim, esse é exatamente o objetivo
  • Gosto muito da equipe da coder. Produto excelente. Obrigado ao Kylecarbs e ao time
    • Obrigado, como usuário