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

• 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  
  

  • Menjalankan shell nyata di http://localhost:8080
  • Bekerja optimal di Linux dan macOS

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