ghostty-web - Biên dịch Ghostty sang WASM để tạo terminal web tương thích với API xterm.js

 (github.com/coder)
4 điểm bởi GN⁺ 2025-12-02 | 2 bình luận | Chia sẻ qua WhatsApp
  • Ghostty-web là một trình giả lập terminal tương thích VT100 chạy trong trình duyệt, có thể sử dụng theo đúng cách như API của xterm.js
  • Sử dụng trình phân tích Ghostty được biên dịch sang WASM, cung cấp cùng một nền tảng mã nguồn với ứng dụng native và không có phụ thuộc runtime
  • Các dự án xterm.js hiện có có thể di chuyển chỉ bằng cách đổi @xterm/xterm thành ghostty-web
  • Cung cấp khả năng xử lý chính xác hơn xterm.js ở các mục như render script phức tạp và hỗ trợ chuỗi XTPUSHSGR/XTPOPSGR
  • Là công cụ có thể đơn giản hóa việc triển khai terminal hiệu năng cao trong môi trường phát triển trên trình duyệt hoặc cloud IDE

Tổng quan

  • ghostty-web là dự án đưa trình giả lập terminal của Ghostty lên môi trường web, đồng thời giữ khả năng tương thích với API xterm.js
    • Cung cấp triển khai VT100 chính xác trong trình duyệt
    • Người dùng xterm.js hiện tại có thể chuyển đổi dễ dàng
  • Sử dụng trình phân tích Ghostty được biên dịch sang WASM và chạy cùng đoạn mã như ứng dụng native
    • Không có phụ thuộc runtime, gồm gói WASM khoảng 400KB
  • Ban đầu được tạo cho Mux (ứng dụng desktop dành cho phát triển song song cách ly), nhưng có thể dùng trong nhiều môi trường khác nhau

Demo và chạy thử

  • Live demo có thể chạy tại ghostty.ondis.co
  • Trong môi trường cục bộ, có thể chạy bằng lệnh sau 
    npx @ghostty-web/demo@next

So sánh với xterm.js

  • xterm.js được dùng trong nhiều môi trường như VS Code, Hyper, nhưng vẫn có vấn đề render và thiếu hỗ trợ một số tính năng
    • Xuất hiện lỗi render khi xử lý script phức tạp (Devanagari, tiếng Ả Rập, v.v.)
    • Không hỗ trợ chuỗi XTPUSHSGR/XTPOPSGR
  • ghostty-web giải quyết các vấn đề trên và cung cấp xử lý grapheme chính xác cùng hỗ trợ đầy đủ các chuỗi
  • Trong khi xterm.js tái triển khai toàn bộ mô phỏng bằng JavaScript, ghostty-web sử dụng nguyên vẹn mã Ghostty native đã được kiểm chứng

Cài đặt và cách dùng

  • Lệnh cài đặt 
    npm install ghostty-web
  • Có thể sử dụng với cùng API như 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);
  • Xem demo/index.html để tham khảo ví dụ giao tiếp client–server

Phát triển và build

  • Build từ mã nguồn Ghostty, kèm bản vá (ghostty-wasm-api.patch) để phơi bày thêm tính năng
  • Cần có Zig và Bun 
    bun run build
  • Nhờ libghostty đang được tác giả Ghostty là Mitchell Hashimoto phát triển, quy mô bản vá nhỏ
  • Trong tương lai, dự án dự kiến dựa trên bản phân phối Ghostty WASM chính thức, đồng thời duy trì API tương thích xterm.js
  • Dự án được phát triển bởi nhóm Coder như một sự ủng hộ dành cho Ghostty

Giấy phép

  • Áp dụng giấy phép MIT

Bài viết liên quan

2 bình luận

 
GN⁺ 2025-12-02
Ý kiến trên Hacker News
  • Thật sự ấn tượng. Tôi không biết Kyle đang làm thứ này
    Bản vá rất hữu ích nên tôi có thể thấy rõ phần nào mình nên hỗ trợ
    Hiện tại hiệu năng có lẽ chưa tốt hơn xterm, vì cách xử lý viewport trông hơi tốn kém
    Không biết bạn đã thử benchmark chưa
    Có lẽ nên dùng RenderState API mới. Hiện tại đang lấy dữ liệu theo từng hàng, cách này chậm. RenderState API hỗ trợ render delta hiệu năng cao dựa trên trạng thái
    Trình render GPU thực tế cũng chạy trên API này. Nó tương thích với mọi renderer
    Ngay cả ở giai đoạn đầu này tôi cũng tò mò về so sánh hiệu năng với xterm.js. Làm rất tốt
    • Tôi vẫn chưa dành nhiều thời gian cho hiệu năng. Hiện giờ nó mới ở mức POC (Proof of Concept)
      Về lâu dài tôi hy vọng nó sẽ trở thành một giải pháp thay thế drop-in cho xterm.js
      Tôi sẽ sớm chuyển sang RenderState API và chia sẻ benchmark
      Tôi cũng bất ngờ vì việc triển khai dễ hơn mình nghĩ
  • Tôi cũng đã làm một thứ tương tự. Dùng ghostty-vt để có thể chạy ứng dụng TUI bên trong một terminal khác
    Tôi dùng nó để triển khai các tính năng kiểu TMUX trong opentui
    Tôi dự định xử lý render ANSI bên trong opencode
    Liên kết dự án ghostty-opentui
  • Cụm từ “triển khai VT100 thực sự trong trình duyệt” khá thú vị
    Ghostty rốt cuộc cũng chỉ là một trình giả lập được viết bằng ngôn ngữ khác thôi mà? Cảm giác hơi cường điệu
    • Terminal vốn là trình giả lập. Theo logic này thì mọi terminal hiện đại đều là một dạng xấp xỉ
      Chỉ là có cái có mức độ tương thích với đặc tả VT cao hơn mà thôi
    • Đồng ý. Vì vậy tôi đã xóa cụm “not a JavaScript approximation” khỏi README
  • Tôi đã làm một ứng dụng trên macOS dùng Ghostty và fzy để tìm kiếm mờ tiêu đề Apple Notes
    Nó hoạt động khá tốt
    Liên kết dự án hot-notes
  • Tôi đã tạo một bản demo online bằng Wasmer. Ai cũng có thể chạy thử dễ dàng (hãy nhập cowsay hello)
    Liên kết demo
    Nếu muốn chạy cục bộ thì làm như sau 
    npx @ghostty-web/demo@next
# hoặc
wasmer run wasmer/ghostty-web
-> truy cập http://localhost:8080/
    Có thể xem mã nguồn tại webassembly.sh. Việc chuyển từ xterm sang ghostty-web diễn ra khá mượt
    • Trên Chrome thì chạy tốt nhưng trên Firefox(v145.0.2) thì không hoạt động
    • Trong trình gỡ lỗi JS của Chrome xuất hiện nhiều lỗi, và các lệnh cowsay hello hay ls không in ra gì cả
    • Demo rất hay. Cảm ơn bạn
  • Ghostty thực sự rất xuất sắc. Nó chạy native trên cả Mac và Linux mà vẫn là đa nền tảng
    Dù phần lõi được viết bằng một ngôn ngữ khá độc đáo, nó vẫn hoạt động ổn định như một ứng dụng Mac. Thiết kế cũng rất đẹp
    • libghostty thật sự rất ấn tượng. Tôi đang dùng nó cho một công cụ khôi phục phiên terminal
      Khi người dùng kết nối lại vào phiên, tôi dùng ghostty để render trạng thái terminal và đầu ra
      Về cơ bản nó là một tmux-lite chỉ khoảng 1k LoC
      Liên kết dự án zmx
    • Nếu chỉ cần thêm tính năng tìm kiếm văn bản và hỗ trợ nhiều tab trên macOS nữa thì sẽ hoàn hảo
  • Mỗi lần thấy một triển khai vt100 mới tôi đều thấy vui
    Hiện tại tôi đang làm phiên bản của riêng mình chạy bên trong Unreal Engine 5
    Bộ ảnh chụp màn hình
    Code cùng Claude ngay trong tab UE5 Editor khá thú vị. Qua Remote Control API còn có thể điều khiển avatar, chụp màn hình, v.v. Rất hữu ích khi debug game 3D
    Claude cũng có thể tạo shader Hyperspace GLSL, nhưng lại không căn đúng được header của bảng trong ảnh chụp màn hình
    • Tôi tò mò Claude tương tác với UE Editor như thế nào. Có phải dùng Remote Control API thông qua MCP không?
  • Làm rất tốt Kyle!
    Nếu thêm webassembly.sh thì có vẻ nó sẽ trở thành một môi trường shell hoàn chỉnh có thể cài cả package ngay trong trình duyệt
    • Tôi định sẽ làm vậy để có một bản demo tốt hơn nhiều
      Hiện tại mới chỉ chạy được từ dòng lệnh nên UX còn hơi đáng tiếc
  • Vậy là giờ ai đó có thể tích hợp ghostty-web làm terminal trong Visual Studio Code (đặc biệt là code-server) chứ?
    • Đúng vậy, đó chính là mục tiêu
  • Tôi thực sự thích đội ngũ coder. Sản phẩm rất tuyệt. Cảm ơn Kylecarbs và cả nhóm
    • Cảm ơn bạn với tư cách là một người dùng