Ghostty를 WASM으로 컴파일해 xterm.js API와 호환되는 웹 터미널

• Ghostty-web은 브라우저에서 실행되는 VT100 호환 터미널 에뮬레이터로, xterm.js API와 동일한 방식으로 사용할 수 있음
• WASM으로 컴파일된 Ghostty 파서를 사용해 네이티브 앱과 동일한 코드 기반을 제공하며, 런타임 의존성이 없음
• 기존 xterm.js 프로젝트는 @xterm/xterm을 ghostty-web으로 변경만 하면 마이그레이션 가능
• 복잡한 스크립트 렌더링과 XTPUSHSGR/XTPOPSGR 시퀀스 지원 등에서 xterm.js보다 정확한 처리 제공
• 브라우저 기반 개발 환경이나 클라우드 IDE 등에서 고성능 터미널 구현을 단순화할 수 있는 도구

개요

• ghostty-web은 Ghostty의 터미널 에뮬레이터를 웹 환경으로 이식한 프로젝트로, xterm.js API 호환성을 유지함
  • 브라우저에서 정확한 VT100 구현을 제공
  • 기존 xterm.js 사용자들이 손쉽게 전환 가능
• WASM으로 컴파일된 Ghostty 파서를 사용하며, 네이티브 앱과 동일한 코드 실행
  • 런타임 의존성 없음, 약 400KB 크기의 WASM 번들로 구성
• 원래 Mux(격리된 병렬 개발용 데스크톱 앱)를 위해 제작되었으나, 다양한 환경에서 사용 가능

데모 및 실행

• 라이브 데모는 ghostty.ondis.co에서 실행 가능
  • disco.cloud의 Greg이 호스팅 지원
• 로컬 환경에서는 다음 명령으로 실행 가능 npx @ghostty-web/demo@next
  • http://localhost:8080에서 실제 셸을 실행
  • Linux와 macOS에서 최적 동작

xterm.js와의 비교

• xterm.js는 VS Code, Hyper 등 다양한 환경에서 사용되지만, 렌더링 문제와 기능 미지원이 존재
  • 복잡한 스크립트(데바나가리, 아랍어 등) 처리 시 렌더링 오류 발생
  • XTPUSHSGR/XTPOPSGR 시퀀스 미지원
• ghostty-web은 위 문제를 해결하며, 정확한 grapheme 처리와 전체 시퀀스 지원 제공
• xterm.js가 자바스크립트로 모든 에뮬레이션을 재구현한 반면, ghostty-web은 검증된 네이티브 Ghostty 코드를 그대로 사용

설치 및 사용법

• 설치 명령 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);
• 클라이언트–서버 통신 예시는 demo/index.html 참고

개발 및 빌드

• Ghostty 소스에서 빌드하며, 추가 기능 노출을 위한 패치(ghostty-wasm-api.patch) 포함
• Zig와 Bun이 필요 bun run build
• Ghostty 제작자 Mitchell Hashimoto가 개발 중인 libghostty 덕분에 패치 규모가 작음
• 향후 공식 Ghostty WASM 배포판을 기반으로, xterm.js 호환 API 유지 예정
• 프로젝트는 Coder 팀이 Ghostty에 대한 지지를 표하며 개발

라이선스

• MIT 라이선스 적용