ghostty-web - Terminal web yang kompatibel dengan API xterm.js dengan Ghostty yang dikompilasi ke WASM

 (github.com/coder)
4 poin oleh GN⁺ 2025-12-02 | 2 komentar | Bagikan ke WhatsApp
  • Ghostty-web adalah emulator terminal kompatibel VT100 yang berjalan di browser, dan dapat digunakan dengan cara yang sama seperti API xterm.js
  • Menggunakan parser Ghostty yang dikompilasi ke WASM sehingga menyediakan basis kode yang sama dengan aplikasi native, serta tanpa dependensi runtime
  • Proyek xterm.js yang sudah ada dapat dimigrasikan hanya dengan mengganti @xterm/xterm menjadi ghostty-web
  • Menawarkan pemrosesan yang lebih akurat dibanding xterm.js dalam hal seperti rendering skrip kompleks dan dukungan urutan XTPUSHSGR/XTPOPSGR
  • Alat yang dapat menyederhanakan implementasi terminal berperforma tinggi di lingkungan pengembangan berbasis browser atau cloud IDE

Gambaran umum

  • ghostty-web adalah proyek yang memindahkan emulator terminal Ghostty ke lingkungan web, sambil mempertahankan kompatibilitas API xterm.js
    • Menyediakan implementasi VT100 yang akurat di browser
    • Memungkinkan pengguna xterm.js yang sudah ada untuk beralih dengan mudah
  • Menggunakan parser Ghostty yang dikompilasi ke WASM, dan menjalankan kode yang sama seperti aplikasi native
    • Tanpa dependensi runtime, terdiri dari bundel WASM berukuran sekitar 400KB
  • Awalnya dibuat untuk Mux (aplikasi desktop untuk pengembangan paralel terisolasi), tetapi dapat digunakan di berbagai lingkungan

Demo dan menjalankan

  • Demo langsung dapat dijalankan di ghostty.ondis.co
  • Di lingkungan lokal, dapat dijalankan dengan perintah berikut 
    npx @ghostty-web/demo@next

Perbandingan dengan xterm.js

  • xterm.js digunakan di berbagai lingkungan seperti VS Code dan Hyper, tetapi memiliki masalah rendering dan fitur yang belum didukung
    • Terjadi kesalahan rendering saat menangani skrip kompleks (Devanagari, Arab, dll.)
    • Tidak mendukung urutan XTPUSHSGR/XTPOPSGR
  • ghostty-web menyelesaikan masalah tersebut, serta menyediakan penanganan grapheme yang akurat dan dukungan urutan lengkap
  • Sementara xterm.js mengimplementasikan ulang seluruh emulasi dalam JavaScript, ghostty-web menggunakan langsung kode Ghostty native yang telah teruji

Instalasi dan cara penggunaan

  • Perintah instalasi 
    npm install ghostty-web
  • Dapat digunakan dengan API yang sama seperti 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);
  • Untuk contoh komunikasi klien–server, lihat demo/index.html

Pengembangan dan build

  • Dibangun dari source Ghostty, dan menyertakan patch (ghostty-wasm-api.patch) untuk mengekspos fitur tambahan
  • Membutuhkan Zig dan Bun 
    bun run build
  • Skala patch kecil berkat libghostty yang sedang dikembangkan oleh pembuat Ghostty, Mitchell Hashimoto
  • Ke depannya akan berbasis pada distribusi WASM Ghostty resmi, sambil mempertahankan API yang kompatibel dengan xterm.js
  • Proyek ini dikembangkan oleh tim Coder sebagai bentuk dukungan mereka terhadap Ghostty

Lisensi

  • Menggunakan lisensi MIT

Bacaan terkait

2 komentar

 
GN⁺ 2025-12-02
Komentar Hacker News
  • Benar-benar mengejutkan. Tidak tahu Kyle sedang membuat hal seperti ini
    Patch-nya sangat berguna sehingga jadi jelas bagian mana yang bisa saya bantu
    Sepertinya saat ini performanya belum lebih baik daripada xterm. Karena cara menangani viewport tampak agak mahal
    Saya penasaran apakah sudah melakukan benchmark
    Sepertinya akan lebih baik jika menggunakan RenderState API yang baru. Saat ini data diambil per baris, dan itu lambat. RenderState API mendukung delta rendering berperforma tinggi berbasis state
    Renderer GPU yang sebenarnya juga berjalan di atas API ini. Cocok dengan renderer apa pun
    Bahkan di tahap awal seperti ini, saya penasaran dengan perbandingan performanya dengan xterm.js. Kerja yang hebat
    • Saya belum menghabiskan banyak waktu untuk performa. Saat ini masih di tingkat POC (Proof of Concept)
      Dalam jangka panjang, saya berharap ini bisa menjadi pengganti drop-in untuk xterm.js
      Saya akan segera beralih ke RenderState API dan membagikan benchmark-nya
      Saya terkejut karena implementasinya ternyata lebih mudah dari perkiraan
  • Saya juga pernah membuat sesuatu yang mirip. Menggunakan ghostty-vt agar aplikasi TUI bisa dijalankan di dalam terminal lain
    Saya memakainya di opentui untuk mengimplementasikan fitur seperti TMUX
    Saya berencana menangani rendering ANSI di dalam opencode
    Tautan proyek ghostty-opentui
  • Ungkapan “implementasi VT100 yang sesungguhnya di browser” terdengar menarik
    Bukankah Ghostty pada akhirnya juga hanya emulasi yang diimplementasikan dalam bahasa lain? Rasanya agak berlebihan
    • Terminal pada dasarnya adalah emulator. Dengan logika itu, semua terminal modern hanyalah semacam pendekatan
      Hanya saja, sebagian memiliki tingkat kompatibilitas yang lebih tinggi dengan spesifikasi VT
    • Setuju. Karena itu saya menghapus frasa “not a JavaScript approximation” dari README
  • Di macOS saya membuat aplikasi yang menggunakan Ghostty dan fzy untuk pencarian fuzzy judul Apple Notes
    Berfungsi cukup baik
    Tautan proyek hot-notes
  • Saya membuat demo online menggunakan Wasmer. Siapa pun bisa dengan mudah menjalankannya (coba masukkan cowsay hello)
    Tautan demo
    Untuk menjalankannya secara lokal, lakukan seperti di bawah ini 
    npx @ghostty-web/demo@next
# atau
wasmer run wasmer/ghostty-web
-> akses http://localhost:8080/
    Kode sumbernya bisa dilihat di webassembly.sh. Beralih dari xterm ke ghostty-web berjalan mulus
    • Berjalan baik di Chrome, tetapi tidak berfungsi di Firefox (v145.0.2)
    • Di debugger JS Chrome terlihat beberapa error, dan perintah cowsay hello maupun ls tidak mengeluarkan output
    • Demo yang keren. Terima kasih
  • Ghostty benar-benar luar biasa. Native di Mac dan Linux sekaligus tetap cross-platform
    Meskipun intinya ditulis dalam bahasa yang unik, ia tetap bekerja stabil seperti aplikasi Mac. Desainnya juga bagus
    • libghostty benar-benar hebat. Saya sedang menggunakannya untuk alat pemulihan sesi terminal
      Saat pengguna terhubung kembali ke sesi, terminal state dan output dirender dengan ghostty
      Pada dasarnya ini seperti tmux-lite sekitar 1k LoC
      Tautan proyek zmx
    • Jika fitur pencarian teks dan dukungan multi-tab ditambahkan di macOS, rasanya akan sempurna
  • Saya selalu senang setiap kali melihat implementasi vt100 baru
    Saat ini saya sedang membuat versi saya sendiri yang berjalan di dalam Unreal Engine 5
    Kumpulan screenshot
    Cukup menyenangkan menulis kode bersama Claude di dalam tab UE5 Editor. Lewat Remote Control API, saya juga bisa mengendalikan avatar, mengambil screenshot, dan lain-lain. Berguna untuk debugging game 3D
    Claude juga bisa membuat shader Hyperspace GLSL, tetapi tidak bisa menyelaraskan header tabel di screenshot dengan benar
    • Saya penasaran bagaimana Claude berinteraksi dengan UE Editor. Apakah menggunakan Remote Control API melalui MCP?
  • Kerja yang keren, Kyle!
    Jika webassembly.sh ditambahkan, sepertinya ini bisa menjadi lingkungan shell lengkap yang bahkan bisa menginstal paket di dalam browser
    • Ya, itu rencananya untuk demo yang jauh lebih baik
      Saat ini hanya bisa dijalankan dari command line, jadi UX-nya masih kurang memuaskan
  • Sekarang mungkin seseorang bisa mengintegrasikan ghostty-web sebagai terminal untuk Visual Studio Code (terutama code-server)?
    • Betul, itu memang tujuannya
  • Saya sangat menyukai tim coder. Produknya luar biasa. Terima kasih untuk Kylecarbs dan tim
    • Sebagai pengguna, terima kasih