▲

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

 (github.com/coder)
3P by GN⁺ 11시간전 | ★ favorite | 댓글 2개
  • 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에서 실행 가능
  • 로컬 환경에서는 다음 명령으로 실행 가능 
    npx @ghostty-web/demo@next

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 라이선스 적용
▲
GN⁺ 11시간전  [-]
Hacker News 의견
  • 정말 놀라움. Kyle이 이런 걸 만들고 있는 줄 몰랐음
    패치가 매우 유익해서 내가 도와야 할 부분이 명확해졌음
    지금 성능이 xterm보다 좋지는 않을 것 같음. viewport를 잡는 방식이 좀 비싸 보이기 때문임
    혹시 벤치마크를 해봤는지 궁금함
    새로운 RenderState API를 사용하는 게 좋을 것 같음. 현재는 행 단위로 데이터를 가져오는데, 이건 느림. RenderState API는 상태 기반으로 고성능 델타 렌더링을 지원함
    실제 GPU 렌더러도 이 API 위에서 동작함. 어떤 렌더러에도 호환 가능함
    이런 초기 단계에서도 xterm.js와의 성능 비교가 궁금함. 훌륭한 작업임
    • 아직 성능에는 많은 시간을 쓰지 않았음. 지금은 POC(Proof of Concept) 수준임
      장기적으로는 xterm.js의 drop-in 대체품이 되길 바람
      곧 RenderState API로 전환하고 벤치마크를 공유할 예정임
      생각보다 쉽게 구현돼서 놀랐음
  • 나도 비슷한 걸 만들어봤음. ghostty-vt를 이용해 다른 터미널 안에서 TUI 앱을 실행할 수 있게 함
    opentui에서 TMUX 같은 기능을 구현하기 위해 사용함
    ANSI 렌더링을 opencode 안에서 처리할 예정임
    ghostty-opentui 프로젝트 링크
  • “브라우저에서의 진짜 VT100 구현”이라는 표현이 흥미로움
    Ghostty도 결국 다른 언어로 구현된 에뮬레이션 아닌가? 약간 과한 표현처럼 느껴짐
    • 터미널은 본래 에뮬레이터임. 이 논리라면 모든 현대 터미널이 일종의 근사치임
      다만 어떤 건 VT 사양과의 호환성 수준이 더 높을 뿐임
    • 동의함. 그래서 README에서 “not a JavaScript approximation” 문구를 삭제했음
  • macOS에서 Ghostty와 fzy를 이용해 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 디버거에서 여러 오류가 보이고, cowsay hello나 ls 명령이 출력되지 않음
    • 멋진 데모임. 고마움
  • Ghostty는 정말 훌륭함. Mac과 Linux 모두 네이티브로 동작하면서도 크로스플랫폼임
    핵심이 독특한 언어로 작성되어 있음에도 Mac 앱처럼 안정적으로 작동함. 디자인도 훌륭함
    • libghostty가 정말 뛰어남. 나는 이를 터미널 세션 복원 도구에 사용 중임
      사용자가 세션에 재접속하면 ghostty로 터미널 상태와 출력을 렌더링함
      사실상 1k LoC짜리 tmux-lite임
      zmx 프로젝트 링크
    • macOS에서 텍스트 검색 기능과 멀티탭 지원만 추가되면 완벽할 것 같음
  • 새로운 vt100 구현을 볼 때마다 즐거움
    지금은 Unreal Engine 5 안에서 동작하는 내 버전을 만들고 있음
    스크린샷 모음
    Claude와 함께 UE5 Editor 탭 안에서 코딩하는 게 꽤 재밌음. Remote Control API를 통해 아바타 제어, 스크린샷 촬영 등도 가능함. 3D 게임 디버깅에 유용함
    Claude는 Hyperspace GLSL 셰이더도 만들어주지만, 스크린샷 표 헤더는 제대로 못 맞춤
    • Claude가 UE Editor와 어떻게 상호작용하는지 궁금함. MCP를 통해 Remote Control API를 사용하는지?
  • 멋진 작업임 Kyle!
    webassembly.sh를 추가하면 브라우저 안에서 패키지 설치까지 가능한 완전한 셸 환경이 될 것 같음
    • 훨씬 개선된 데모를 위해 그렇게 할 예정임
      현재는 명령줄에서만 실행 가능해서 UX가 아쉬움
  • 이제 누군가 Visual Studio Code (특히 code-server)에 ghostty-web을 터미널로 통합할 수도 있겠음?
    • 맞음, 바로 그게 목표임
  • coder 팀을 정말 좋아함. 훌륭한 제품임. Kylecarbs와 팀에게 감사함
    • 사용자로서 고마움
답변달기