ghostty-web - Ghostty'yi WASM ile derleyip xterm.js API uyumlu web terminali

 (github.com/coder)
4 puan yazan GN⁺ 2025-12-02 | 2 yorum | WhatsApp'ta paylaş
  • Ghostty-web, tarayıcıda çalışan bir VT100 uyumlu terminal emülatörüdür ve xterm.js API'siyle aynı şekilde kullanılabilir.
  • WASM ile derlenmiş Ghostty ayrıştırıcısı kullanılarak, yerel uygulamalarla aynı kod tabanı sunulur ve çalışma zamanı bağımlılığı yoktur.
  • Mevcut xterm.js projeleri yalnızca @xterm/xtermi ghostty-web ile değiştirerek geçiş yapabilir.
  • Karmaşık betik renderleme ve XTPUSHSGR/XTPOPSGR dizisi desteği gibi durumlarda xterm.js'ten daha doğru davranış sunar.
  • Tarayıcı tabanlı geliştirme ortamlarında veya bulut IDE'lerde yüksek performanslı bir terminali daha basit şekilde uygulamaya yardımcı olur.

Genel Bakış

  • ghostty-web, Ghostty terminal emülatörünü web ortamına taşımayı amaçlayan bir projedir ve xterm.js API uyumluluğunu korur.
    • Tarayıcıda doğru VT100 uygulaması sağlar.
    • Mevcut xterm.js kullanıcıları kolayca geçiş yapabilir.
  • WASM ile derlenmiş Ghostty ayrıştırıcısı kullanılır ve yerel uygulamayla aynı kod çalıştırılır.
    • Çalışma zamanı bağımlılığı yoktur, yaklaşık 400KB boyutunda bir WASM paketi ile gelir.
  • Orijinal olarak Mux (izole paralel geliştirme için masaüstü uygulaması) için yapılmış olsa da, birçok ortamda kullanılabilir.

Demo ve Çalıştırma

  • Canlı demo ghostty.ondis.co'de çalışır.
  • Yerelde aşağıdaki komutla başlatılabilir: 
    npx @ghostty-web/demo@next
    Reklam
    • Gerçek bir shell'i http://localhost:8080 adresinde çalıştırır.
    • Linux ve macOS'ta en iyi şekilde çalışır.

xterm.js ile Karşılaştırma

  • xterm.js, VS Code, Hyper ve diğer çeşitli ortamlarda kullanılsa da renderlama sorunları ve eksik özellikler bulunuyor.
    • Karmaşık yazı sistemleri (Devanagari, Arapça vb.) işlerken renderleme hataları oluşuyor.
    • XTPUSHSGR/XTPOPSGR dizileri desteklenmiyor.
  • ghostty-web bu sorunları çözüyor ve doğru grapheme işleme ile tam dizi desteği sağlıyor.
  • xterm.js tüm emülasyonu JavaScript ile yeniden uygulamışken, ghostty-web doğrulanmış yerel Ghostty kodunu doğrudan kullanıyor.

Kurulum ve Kullanım

  • Kurulum komutu 
    npm install ghostty-web
    Reklam
  • xterm.js ile aynı API kullanılarak çalışır: 
    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);
  • İstemci–sunucu iletişimi için örnek, demo/index.html dosyasında bulunabilir.

Geliştirme ve Derleme

  • Ghostty kaynağından derlenir ve ek özellik açığa çıkarma için bir yama (ghostty-wasm-api.patch) eklenir.
  • Zig ve Bun gereklidir. 
    bun run build
  • Ghostty geliştiricisi Mitchell Hashimoto tarafından geliştirilen libghostty sayesinde yama boyutu küçüktür.
  • Gelecekte, resmi Ghostty WASM dağıtımı temel alınarak xterm.js uyumlu API'nin korunması hedefleniyor.
  • Proje, Ghostty'ye desteklerini gösteren Coder ekibi tarafından geliştiriliyor.

Lisans

  • MIT lisansı uygulanır.

İlgili okumalar

2 yorum

 
GN⁺ 2025-12-02
Hacker News yorumu
  • Gerçekten etkileyici. Kyle’ın böyle bir şey yaptığını bilmiyordum
    Yama çok aydınlatıcı, bu sayede benim nerede yardımcı olmam gerektiği netleşti
    Şu anda performansının xterm’den daha iyi olacağını sanmıyorum. viewport’u ele alış biçimi biraz maliyetli görünüyor
    Acaba hiç benchmark yaptınız mı diye merak ediyorum
    Yeni RenderState API’ı kullanmak iyi olabilir. Şu anda veriyi satır satır alıyor, bu da yavaş. RenderState API durum tabanlı yüksek performanslı delta rendering destekliyor
    Gerçek GPU renderer da bu API’nin üstünde çalışıyor. Her türlü renderer ile uyumlu
    Bu kadar erken bir aşamada bile xterm.js ile performans karşılaştırmasını merak ediyorum. Harika iş
    • Performansa henüz çok zaman harcamadım. Şu an daha çok POC(Proof of Concept) seviyesinde
      Uzun vadede xterm.js için drop-in bir alternatif olmasını istiyorum
      Yakında RenderState API’ye geçip benchmark’ları paylaşacağım
      Düşündüğümden daha kolay uygulanmasına şaşırdım
  • Ben de benzer bir şey yaptım. ghostty-vt kullanarak TUI uygulamalarını başka bir terminalin içinde çalıştırabiliyorum
    Bunu opentui içinde TMUX benzeri özellikler uygulamak için kullanıyorum
    ANSI rendering’i opencode içinde ele alacağım
    ghostty-opentui proje bağlantısı
  • “Tarayıcıda gerçek bir VT100 implementasyonu” ifadesi ilginç geldi
    Ghostty de sonuçta başka bir dilde yazılmış bir emülasyon değil mi? Biraz abartılı gibi duruyor
    • Terminaller zaten doğası gereği emülatördür. Bu mantıkla tüm modern terminaller bir tür yaklaşım sayılır
      Sadece bazılarının VT spesifikasyonuyla uyumluluk seviyesi daha yüksektir
    • Katılıyorum. Bu yüzden README’den “not a JavaScript approximation” ifadesini kaldırdım
  • macOS’ta Ghostty ve fzy kullanarak Apple Notes başlıklarında bulanık arama yapan bir uygulama yaptım
    Oldukça iyi çalışıyor
    hot-notes proje bağlantısı
  • Wasmer ile bir çevrimiçi demo yaptım. Herkes kolayca çalıştırabilir (cowsay hello yazmayı deneyin)
    Demo bağlantısı
    Yerelde çalıştırmak için şöyle yapabilirsiniz 
    npx @ghostty-web/demo@next
# 또는
wasmer run wasmer/ghostty-web
-> http://localhost:8080/ 접속
    Kaynak kodu webassembly.sh içinde görülebilir. xterm’den ghostty-web’e sorunsuz geçiliyor
    • Chrome’da iyi çalışıyor ama Firefox(v145.0.2)’ta çalışmıyor
    • Chrome JS debugger’da birden fazla hata görünüyor ve cowsay hello ya da ls komutlarının çıktısı gelmiyor
    • Harika demo. Teşekkürler
  • Ghostty gerçekten harika. Hem Mac hem Linux’ta native çalışırken aynı zamanda cross-platform
    Çekirdeği alışılmadık bir dilde yazılmış olsa da bir Mac uygulaması kadar kararlı çalışıyor. Tasarımı da çok iyi
    • libghostty gerçekten müthiş. Ben bunu terminal oturumu geri yükleme aracında kullanıyorum
      Kullanıcı oturuma yeniden bağlandığında ghostty ile terminal durumunu ve çıktıyı render ediyorum
      Pratikte 1k LoC’lik bir tmux-lite
      zmx proje bağlantısı
    • macOS’ta metin arama özelliği ve çoklu sekme desteği de eklenirse kusursuz olur gibi
  • Yeni bir vt100 implementasyonu gördüğümde hep mutlu oluyorum
    Şu sıralar Unreal Engine 5 içinde çalışan kendi sürümümü yapıyorum
    Ekran görüntüleri
    Claude ile birlikte UE5 Editor sekmesi içinde kod yazmak oldukça eğlenceli. Remote Control API üzerinden avatar kontrolü, ekran görüntüsü alma gibi şeyler de mümkün. 3D oyun debug etmede faydalı
    Claude, Hyperspace GLSL shader da üretiyor ama ekran görüntüsündeki tablo başlıklarını düzgün hizalayamıyor
    • Claude’un UE Editor ile nasıl etkileşime girdiğini merak ettim. Remote Control API’yi MCP üzerinden mi kullanıyor?
  • Harika iş Kyle!
    webassembly.sh eklenirse tarayıcı içinde paket kurulumuna kadar giden tam bir shell ortamı olabilir gibi
    • Çok daha iyi bir demo için bunu yapmayı planlıyorum
      Şu anda yalnızca komut satırından çalışabildiği için UX biraz zayıf kalıyor
  • Artık birisi Visual Studio Code’a (özellikle code-server’a) ghostty-web’i terminal olarak entegre edebilir mi?
    • Evet, hedef tam olarak bu
  • coder ekibini gerçekten seviyorum. Harika ürün. Kylecarbs ve ekibe teşekkürler
    • Kullanıcı olarak teşekkürler