ghostty-web - Ghostty को WebAssembly (WASM) में कंपाइल करके xterm.js API के साथ संगत वेब टर्मिनल

 (github.com/coder)
4 पॉइंट द्वारा GN⁺ 2025-12-02 | 2 टिप्पणियां | WhatsApp पर शेयर करें
  • Ghostty-web एक ब्राउज़र में चलने वाला VT100 संगत टर्मिनल इम्यूलेटर है, जिसे xterm.js API की तरह ही इस्तेमाल किया जा सकता है
  • यह WASM में कंपाइल किया गया Ghostty parser उपयोग करके नेटिव ऐप के समान कोड बेस देता है और इसमें कोई रनटाइम निर्भरता नहीं
  • मौजूदा xterm.js प्रोजेक्ट में सिर्फ @xterm/xterm को ghostty-web से बदलने पर ही माइग्रेशन हो सकता है
  • जटिल स्क्रिप्ट रेंडरिंग और XTPUSHSGR/XTPOPSGR sequence support जैसे मामलों में यह xterm.js से अधिक सटीक हैंडलिंग देता है
  • ब्राउज़र-आधारित डेवलपमेंट एनवायरनमेंट या cloud IDE में हाई-परफॉर्मेंस टर्मिनल इम्प्लीमेंटेशन को सरल बना सकता है

अवलोकन

  • ghostty-web Ghostty के टर्मिनल इम्यूलेटर को वेब वातावरण में पोर्ट करने वाला प्रोजेक्ट है, जो xterm.js API compatibility बनाए रखता है
    • ब्राउज़र में सटीक VT100 implementation देता है
    • पहले से xterm.js उपयोग करने वाले उपयोगकर्ता आसानी से स्विच कर सकते हैं
  • यह WASM में कंपाइल्ड Ghostty parser का उपयोग करता है और नेटिव ऐप के समान कोड रन करता है
    • इसमें runtime dependency नहीं है, लगभग 400KB आकार के WASM bundle के साथ
  • यह पहले Mux (एक अलग-थलग समानांतर विकास डेस्कटॉप ऐप) के लिए बनाया गया था, लेकिन कई अलग-अलग environments में उपयोग किया जा सकता है

डेमो और रन

  • लाइव डेमो ghostty.ondis.co पर उपलब्ध है
  • लोकल एनवायरनमेंट में इसे इस कमांड से रन किया जा सकता है 
    npx @ghostty-web/demo@next
    • वास्तविक shell http://localhost:8080 पर चलता है
    • Linux और macOS पर ऑप्टिमाइज्ड तरीके से काम करता है

xterm.js के साथ तुलना

  • xterm.js VS Code, Hyper आदि कई environments में इस्तेमाल होता है, लेकिन इसमें rendering issues और unsupported features मौजूद हैं
    • जटिल स्क्रिप्ट (Devanagari, Arabic आदि) प्रोसेस करते समय rendering errors दिख सकते हैं
    • XTPUSHSGR/XTPOPSGR sequences support नहीं है
  • ghostty-web इन समस्याओं को हल करते हुए सटीक grapheme handling और पूरी sequence support देता है
  • जबकि xterm.js में टर्मिनल इम्यूलेशन का पूरा लॉजिक JavaScript में फिर से implement किया गया है, ghostty-web सीधे validated native Ghostty code का उपयोग करता है

इंस्टॉलेशन और उपयोग

  • इंस्टॉलेशन कमांड 
    npm install ghostty-web
  • xterm.js जैसी ही API से उपयोग करें 
    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);
  • क्लाइंट–सर्वर communication उदाहरण के लिए demo/index.html देखें

डेवलपमेंट और बिल्ड

  • Ghostty स्रोत कोड से build करते हुए अतिरिक्त फीचर एक्सपोज़ करने के लिए patch (ghostty-wasm-api.patch) शामिल है
  • Zig और Bun की जरूरत है 
    bun run build
  • Ghostty के निर्माता Mitchell Hashimoto द्वारा बनाए जा रहे libghostty की वजह से patch छोटा रहा
  • आगे चलकर official Ghostty WASM रिलीज़ के आधार पर, xterm.js-compatible API compatibility बनाए रखने की योजना है
  • इस प्रोजेक्ट का विकास Coder टीम ने Ghostty को support देने के लिए किया

लाइसेंस

  • MIT लाइसेंस लागू

संबंधित पढ़ाई

2 टिप्पणियां

 
GN⁺ 2025-12-02
Hacker News राय
  • वाकई हैरान करने वाला है। पता नहीं था कि Kyle ऐसा कुछ बना रहे हैं
    patch बहुत जानकारीपूर्ण है, इसलिए मुझे साफ़ समझ आया कि मैं कहाँ मदद कर सकता हूँ
    अभी performance शायद xterm से बेहतर नहीं होगी। viewport को संभालने का तरीका थोड़ा महंगा लग रहा है
    जानना चाहूँगा कि क्या आपने benchmark किया है
    नया RenderState API इस्तेमाल करना अच्छा रहेगा। अभी data row-by-row लिया जा रहा है, और यह धीमा है। RenderState API state-based high-performance delta rendering को support करता है
    असली GPU renderer भी इसी API पर चलता है। यह किसी भी renderer के साथ compatible है
    इस शुरुआती चरण में भी xterm.js के साथ performance comparison देखना दिलचस्प होगा। शानदार काम
    • मैंने अभी तक performance पर ज़्यादा समय नहीं लगाया है। अभी यह POC(Proof of Concept) स्तर पर है
      लंबे समय में उम्मीद है कि यह xterm.js का drop-in replacement बने
      जल्दी ही RenderState API पर switch करूँगा और benchmark साझा करूँगा
      यह उम्मीद से ज़्यादा आसान निकला, इस बात से मैं खुद हैरान था
  • मैंने भी कुछ ऐसा ही बनाया है। ghostty-vt का इस्तेमाल करके दूसरे terminal के अंदर TUI apps चला सकते हैं
    opentui में TMUX जैसी functionality लागू करने के लिए इसका इस्तेमाल कर रहा हूँ
    ANSI rendering को opencode के अंदर handle करने वाला हूँ
    ghostty-opentui प्रोजेक्ट लिंक
  • “ब्राउज़र में असली VT100 implementation” वाली अभिव्यक्ति दिलचस्प लगी
    Ghostty भी आखिरकार किसी दूसरी भाषा में किया गया emulation ही नहीं है? थोड़ा बढ़ा-चढ़ाकर कहा हुआ लगता है
    • terminal मूल रूप से emulator ही होता है। इस तर्क से देखें तो हर modern terminal एक तरह का approximation है
      बस कुछ की VT spec के साथ compatibility level ज़्यादा होती है
    • सहमत। इसलिए README से “not a JavaScript approximation” वाली पंक्ति हटा दी है
  • मैंने macOS पर Ghostty और fzy का इस्तेमाल करके Apple Notes के titles को fuzzy search करने वाला app बनाया है
    काफ़ी अच्छा काम करता है
    hot-notes प्रोजेक्ट लिंक
  • Wasmer का इस्तेमाल करके online demo बनाया है। अब कोई भी इसे आसानी से चला सकता है (cowsay hello टाइप करके देखें)
    डेमो लिंक
    लोकल में चलाने के लिए नीचे की तरह करें 
    npx @ghostty-web/demo@next
# 또는
wasmer run wasmer/ghostty-web
-> http://localhost:8080/ 접속
    source code webassembly.sh में देख सकते हैं। xterm से ghostty-web पर बिना दिक्कत switch हो जाता है
    • Chrome में ठीक चलता है, लेकिन Firefox(v145.0.2) में काम नहीं करता
    • Chrome JS debugger में कई errors दिखते हैं, और cowsay hello या ls command का output नहीं आता
    • शानदार demo है। धन्यवाद
  • Ghostty वाकई शानदार है। Mac और Linux दोनों पर native चलते हुए भी यह cross-platform है
    core किसी अनोखी भाषा में लिखा होने के बावजूद Mac app की तरह स्थिर चलता है। design भी बेहतरीन है
    • libghostty सचमुच कमाल का है। मैं इसे terminal session restore tool में इस्तेमाल कर रहा हूँ
      जब user session से दोबारा जुड़ता है, तो terminal state और output को ghostty से render करता हूँ
      यह लगभग 1k LoC वाला tmux-lite है
      zmx प्रोजेक्ट लिंक
    • macOS पर text search और multi-tab support जुड़ जाए तो यह परफेक्ट लगेगा
  • हर नई vt100 implementation देखकर खुशी होती है
    अभी मैं Unreal Engine 5 के अंदर चलने वाला अपना version बना रहा हूँ
    स्क्रीनशॉट संग्रह
    Claude के साथ UE5 Editor tab के अंदर coding करना काफ़ी मज़ेदार है। Remote Control API के ज़रिए avatar control, screenshot capture वगैरह भी किया जा सकता है। 3D game debugging में यह उपयोगी है
    Claude Hyperspace GLSL shader भी बना देता है, लेकिन screenshot table header को सही align नहीं कर पाता
    • जानना चाहूँगा कि Claude UE Editor के साथ कैसे interact करता है। क्या वह MCP के ज़रिए Remote Control API इस्तेमाल करता है?
  • शानदार काम Kyle!
    अगर webassembly.sh जोड़ दिया जाए, तो ब्राउज़र के अंदर package installation तक संभव एक पूरा shell environment बन सकता है
    • और बेहतर demo के लिए मैं ऐसा करने वाला हूँ
      अभी यह केवल command line पर चलता है, इसलिए UX थोड़ा कमज़ोर है
  • अब शायद कोई Visual Studio Code (खासकर code-server) में ghostty-web को terminal के रूप में integrate कर सकता है?
    • हाँ, बिल्कुल वही लक्ष्य है
  • मुझे coder टीम बहुत पसंद है। शानदार product है। Kylecarbs और टीम को धन्यवाद
    • user के रूप में धन्यवाद