ghostty-web - คอมไพล์ Ghostty เป็น WASM เพื่อสร้างเว็บเทอร์มินัลที่เข้ากันได้กับ xterm.js API

 (github.com/coder)
4 คะแนน โดย GN⁺ 2025-12-02 | 2 ความคิดเห็น | แชร์ทาง WhatsApp
  • Ghostty-web คือเทอร์มินัลอีมูเลเตอร์ที่เข้ากันได้กับ VT100 ซึ่งทำงานในเบราว์เซอร์ และสามารถใช้งานได้แบบเดียวกับ API ของ xterm.js
  • ใช้ ตัวแยกวิเคราะห์ Ghostty ที่คอมไพล์ด้วย WASM เพื่อให้มีฐานโค้ดเดียวกับแอปเนทีฟ โดย ไม่มีการพึ่งพา runtime
  • โปรเจกต์ xterm.js เดิมสามารถย้ายไปใช้ได้โดยเปลี่ยนเฉพาะ @xterm/xterm เป็น ghostty-web
  • ให้การประมวลผลที่แม่นยำกว่า xterm.js ในเรื่อง การเรนเดอร์สคริปต์ที่ซับซ้อน และการรองรับลำดับคำสั่ง XTPUSHSGR/XTPOPSGR
  • เป็นเครื่องมือที่ช่วยให้การนำไปใช้เทอร์มินัลประสิทธิภาพสูงในสภาพแวดล้อมพัฒนาบนเบราว์เซอร์หรือ IDE บนคลาวด์เป็นเรื่องง่ายขึ้น

ภาพรวม

  • ghostty-web เป็นโปรเจกต์ที่นำเทอร์มินัลอีมูเลเตอร์ของ Ghostty มายังสภาพแวดล้อมเว็บ โดยยังคง ความเข้ากันได้กับ xterm.js API
    • ให้การใช้งาน VT100 ที่แม่นยำ บนเบราว์เซอร์
    • ผู้ใช้ xterm.js เดิมสามารถย้ายมาใช้งานได้ง่าย
  • ใช้ ตัวแยกวิเคราะห์ Ghostty ที่คอมไพล์ด้วย WASM และรันโค้ดเดียวกับแอปเนทีฟ
    • ไม่มีการพึ่งพา runtime และประกอบด้วย แพ็กเกจ WASM ขนาดราว 400KB
  • เดิมพัฒนาขึ้นสำหรับ Mux (แอปเดสก์ท็อปสำหรับการพัฒนาที่แยกกันแบบขนาน) แต่สามารถใช้งานได้ใน สภาพแวดล้อมที่หลากหลาย

การสาธิตและการรัน

  • เดโมสด ใช้งานได้ที่ ghostty.ondis.co
  • ในสภาพแวดล้อมเครื่อง local สามารถรันด้วยคำสั่งดังต่อไปนี้ 
    npx @ghostty-web/demo@next
    • รัน shell จริงที่ http://localhost:8080
    • ทำงานได้อย่างเหมาะสมบน Linux และ macOS

การเปรียบเทียบกับ xterm.js

  • xterm.js ถูกใช้ใน VS Code, Hyper และสภาพแวดล้อมต่างๆ แต่มีปัญหาการเรนเดอร์และฟีเจอร์ที่ยังไม่รองรับ
    • เกิดข้อผิดพลาดในการเรนเดอร์เมื่อประมวลผล สคริปต์ที่ซับซ้อน (เช่น Devanagari, อาหรับ ฯลฯ)
    • ไม่รองรับลำดับคำสั่ง XTPUSHSGR/XTPOPSGR
  • ghostty-web แก้ปัญหาเหล่านี้โดยให้การประมวลผล grapheme ที่แม่นยำ และรองรับ ลำดับคำสั่งทั้งหมด
  • ในขณะที่ xterm.js สร้างการจำลองใหม่ทั้งหมดด้วย JavaScript, ghostty-web ใช้โค้ด Ghostty เนทีฟที่ผ่านการตรวจสอบแล้ว โดยตรง

การติดตั้งและการใช้งาน

  • คำสั่งติดตั้ง 
    npm install ghostty-web
  • สามารถใช้งานด้วย API แบบเดียวกับ 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);
  • ตัวอย่างการสื่อสาร client–server อยู่ใน demo/index.html

การพัฒนาและ build

  • สร้างจากซอร์สของ Ghostty และมีการรวมแพตช์เพื่อเปิดเผยฟีเจอร์เพิ่มเติม (ghostty-wasm-api.patch)
  • จำเป็นต้องใช้ Zig และ Bun 
    bun run build
  • แพตช์มีขนาดเล็กเพราะ Mitchell Hashimoto ผู้พัฒนา Ghostty กำลังพัฒนา libghostty
  • แผนคือจะใช้ การเผยแพร่ Ghostty WASM อย่างเป็นทางการเป็นพื้นฐาน ในอนาคต พร้อมรักษา xterm.js-compatible API ไว้
  • โครงการนี้พัฒนาขึ้นโดยทีม Coder ที่ให้การสนับสนุน Ghostty

ลิขสิทธิ์

  • ใช้ ใบอนุญาต MIT

บทความที่เกี่ยวข้อง

2 ความคิดเห็น

 
GN⁺ 2025-12-02
ความคิดเห็นจาก Hacker News
  • น่าทึ่งจริง ๆ ไม่รู้มาก่อนเลยว่า Kyle กำลังทำสิ่งนี้อยู่
    แพตช์มีประโยชน์มาก เลยทำให้เห็นชัดว่าฉันควรช่วยตรงไหน
    ตอนนี้ประสิทธิภาพน่าจะยังไม่ดีกว่า xterm เพราะวิธีจัดการ viewport ดูค่อนข้างมีต้นทุนสูง
    สงสัยว่าได้ลองทำ benchmark ไว้บ้างหรือยัง
    คิดว่าน่าจะดีถ้าใช้ RenderState API ตัวใหม่ ตอนนี้กำลังดึงข้อมูลแบบทีละบรรทัด ซึ่งช้า RenderState API รองรับการเรนเดอร์แบบเดลตาประสิทธิภาพสูงบนพื้นฐานของสถานะ
    ตัวเรนเดอร์ GPU จริงก็ทำงานอยู่บน API นี้เช่นกัน ใช้ร่วมกับเรนเดอร์แบบไหนก็ได้
    แม้จะยังอยู่ในช่วงเริ่มต้น ก็อยากรู้ว่าเทียบประสิทธิภาพกับ xterm.js แล้วเป็นอย่างไร งานยอดเยี่ยมมาก
    • ยังไม่ได้ใช้เวลากับเรื่องประสิทธิภาพมากนัก ตอนนี้ยังอยู่ในระดับ POC (Proof of Concept)
      ระยะยาวหวังว่าจะเป็นตัวแทนแบบ drop-in ของ xterm.js ได้
      จะย้ายไปใช้ RenderState API เร็ว ๆ นี้และจะแชร์ benchmark ให้ดู
      แปลกใจเหมือนกันว่ามันทำได้ง่ายกว่าที่คิด
  • ฉันก็เคยทำอะไรคล้าย ๆ กัน ใช้ ghostty-vt เพื่อให้รันแอป TUI ภายในเทอร์มินัลอีกตัวได้
    ใช้มันเพื่อทำฟีเจอร์คล้าย TMUX ใน opentui
    มีแผนจะจัดการการเรนเดอร์ ANSI ภายใน opencode
    ลิงก์โปรเจกต์ ghostty-opentui
  • คำว่า “การทำ VT100 จริง ในเบราว์เซอร์” ฟังดูน่าสนใจ
    แต่ Ghostty เองสุดท้ายก็เป็นแค่ การจำลอง ที่เขียนด้วยอีกภาษาหนึ่งไม่ใช่หรือ? รู้สึกว่าเป็นคำพูดที่เกินจริงไปหน่อย
    • เดิมทีเทอร์มินัลก็คือ emulator อยู่แล้ว ถ้าตามตรรกะนี้ เทอร์มินัลสมัยใหม่ทั้งหมดก็เป็นเพียงการประมาณค่าแบบหนึ่ง
      เพียงแต่บางตัวมี ระดับความเข้ากันได้ กับสเปก VT สูงกว่าเท่านั้น
    • เห็นด้วย เลยลบข้อความ “not a JavaScript approximation” ออกจาก README แล้ว
  • ฉันทำแอปบน macOS ที่ใช้ Ghostty กับ fzy เพื่อ ค้นหาแบบ fuzzy ชื่อโน้ตใน Apple Notes
    ใช้งานได้ดีทีเดียว
    ลิงก์โปรเจกต์ hot-notes
  • ได้ทำ เดโมออนไลน์ โดยใช้ Wasmer ใคร ๆ ก็รันได้ง่าย (cowsay hello)
    ลิงก์เดโม
    ถ้าจะรันบนเครื่องตัวเอง ให้ทำแบบด้านล่าง 
    npx @ghostty-web/demo@next
# หรือ
wasmer run wasmer/ghostty-web
-> เข้า http://localhost:8080/
    ซอร์สโค้ดดูได้ที่ webassembly.sh สลับจาก xterm มาเป็น ghostty-web ได้อย่างราบรื่น
    • บน Chrome ใช้งานได้ดี แต่บน Firefox(v145.0.2) ใช้งานไม่ได้
    • ใน Chrome JS debugger มี error หลายตัว และคำสั่ง cowsay hello หรือ ls ไม่แสดงผลลัพธ์
    • เดโมเจ๋งมาก ขอบคุณ
  • Ghostty ยอดเยี่ยมจริง ๆ เป็น cross-platform ที่ทำงานแบบ native ทั้งบน Mac และ Linux
    แม้แกนหลักจะเขียนด้วยภาษาที่ค่อนข้างแปลก แต่ก็ทำงานเสถียรเหมือนแอป Mac แท้ ๆ ดีไซน์ก็ยอดเยี่ยม
    • libghostty ดีมากจริง ๆ ฉันกำลังใช้มันกับเครื่องมือกู้คืนเซสชันเทอร์มินัล
      เมื่อผู้ใช้เชื่อมต่อกลับเข้าเซสชัน ก็ใช้ ghostty เรนเดอร์สถานะและเอาต์พุตของเทอร์มินัล
      เรียกได้ว่าเป็น tmux-lite ขนาด 1k LoC
      ลิงก์โปรเจกต์ zmx
    • ถ้าเพิ่มฟีเจอร์ค้นหาข้อความและ รองรับหลายแท็บ บน macOS ได้ก็น่าจะสมบูรณ์แบบ
  • เห็น การทำ vt100 ใหม่เมื่อไรก็รู้สึกสนุกทุกที
    ตอนนี้ฉันกำลังทำเวอร์ชันของตัวเองที่รันอยู่ใน Unreal Engine 5
    รวมภาพหน้าจอ
    การเขียนโค้ดกับ Claude ภายในแท็บ UE5 Editor นี่สนุกใช้ได้ ผ่าน Remote Control API ยังควบคุมอวาตาร์ ถ่ายภาพหน้าจอ และทำอย่างอื่นได้ด้วย มีประโยชน์กับการดีบักเกม 3D มาก
    Claude ยังช่วยทำ Hyperspace GLSL shader ได้ แต่ยังจัดหัวตารางในภาพหน้าจอได้ไม่ค่อยตรง
    • สงสัยว่า Claude โต้ตอบกับ UE Editor ยังไง ใช้ Remote Control API ผ่าน MCP หรือเปล่า?
  • งานเจ๋งมาก Kyle!
    ถ้าเพิ่ม webassembly.sh เข้าไป ก็น่าจะกลายเป็น สภาพแวดล้อมเชลล์เต็มรูปแบบที่ติดตั้งแพ็กเกจได้ในเบราว์เซอร์
    • มีแผนจะทำแบบนั้นสำหรับเดโมที่ดีขึ้นมาก
      ตอนนี้ยังรันได้แค่จาก command line เลยทำให้ UX ยังน่าเสียดาย
  • ตอนนี้คงมีคนเอา ghostty-web ไปผนวกเป็นเทอร์มินัลใน Visual Studio Code (โดยเฉพาะ code-server) ได้แล้วมั้ง?
    • ใช่ นั่นคือเป้าหมายเลย
  • ฉันชอบทีม coder มาก เป็นผลิตภัณฑ์ที่ยอดเยี่ยม ขอบคุณ Kylecarbs และทีมงาน
    • ขอบคุณในฐานะผู้ใช้