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

> Clean Markdown view of GeekNews topic #24780. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=24780](https://news.hada.io/topic?id=24780)
- GeekNews Markdown: [https://news.hada.io/topic/24780.md](https://news.hada.io/topic/24780.md)
- Type: GN+
- Author: [neo](https://news.hada.io/@neo)
- Published: 2025-12-02T23:33:01+09:00
- Updated: 2025-12-02T23:33:01+09:00
- Original source: [github.com/coder](https://github.com/coder/ghostty-web)
- Points: 4
- Comments: 2

## Topic Body

- **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](https://ghostty.ondis.co)에서 실행 가능  
- 로컬 환경에서는 다음 명령으로 실행 가능  
  ```bash  
  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 코드**를 그대로 사용  
  
### 설치 및 사용법  
- 설치 명령  
  ```bash  
  npm install ghostty-web  
  ```  
- xterm.js와 동일한 API로 사용 가능  
  ```javascript  
  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**이 필요  
  ```bash  
  bun run build  
  ```  
- Ghostty 제작자 **Mitchell Hashimoto**가 개발 중인 `libghostty` 덕분에 패치 규모가 작음  
- 향후 **공식 Ghostty WASM 배포판**을 기반으로, **xterm.js 호환 API 유지** 예정  
- 프로젝트는 **Coder** 팀이 Ghostty에 대한 지지를 표하며 개발  
  
### 라이선스  
- **MIT 라이선스** 적용

## Comments



### Comment 47103

- Author: xguru
- Created: 2025-12-03T09:53:36+09:00
- Points: 1

[Ghostty 1.0 출시 - 고속, 크로스플랫폼 터미널 에뮬레이터](https://news.hada.io/topic?id=18451)  
[libghostty가 온다](https://news.hada.io/topic?id=23252)  
  
[2025년 터미널 에뮬레이터 현황: 방랑하는 챔피언들](https://news.hada.io/topic?id=24130)

### Comment 47088

- Author: neo
- Created: 2025-12-02T23:34:01+09:00
- Points: 1

###### [Hacker News 의견](https://news.ycombinator.com/item?id=46110842) 
- 정말 놀라움. Kyle이 이런 걸 만들고 있는 줄 몰랐음  
  패치가 매우 **유익**해서 내가 도와야 할 부분이 명확해졌음  
  지금 성능이 xterm보다 좋지는 않을 것 같음. viewport를 잡는 방식이 좀 비싸 보이기 때문임  
  혹시 **벤치마크**를 해봤는지 궁금함  
  새로운 [RenderState API](https://github.com/ghostty-org/ghostty/blob/main/src/terminal/render.zig)를 사용하는 게 좋을 것 같음. 현재는 행 단위로 데이터를 가져오는데, 이건 느림. 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 프로젝트 링크](https://github.com/remorses/ghostty-opentui)
- “브라우저에서의 **진짜 VT100 구현**”이라는 표현이 흥미로움  
  Ghostty도 결국 다른 언어로 구현된 **에뮬레이션** 아닌가? 약간 과한 표현처럼 느껴짐
  - 터미널은 본래 **에뮬레이터**임. 이 논리라면 모든 현대 터미널이 일종의 근사치임  
    다만 어떤 건 VT 사양과의 **호환성 수준**이 더 높을 뿐임
  - 동의함. 그래서 README에서 “not a JavaScript approximation” 문구를 삭제했음
- macOS에서 Ghostty와 fzy를 이용해 Apple Notes 제목을 **퍼지 검색**하는 앱을 만들었음  
  꽤 잘 작동함  
  [hot-notes 프로젝트 링크](https://github.com/emadda/hot-notes/)
- Wasmer를 이용해 **온라인 데모**를 만들었음. 누구나 쉽게 실행 가능함 (`cowsay hello` 입력해볼 것)  
  [데모 링크](https://ghostty-web.wasmer.app/)  
  로컬에서 실행하려면 아래처럼 하면 됨  
  ```bash
  npx @ghostty-web/demo@next
  # 또는
  wasmer run wasmer/ghostty-web
  -> http://localhost:8080/ 접속
  ```  
  소스코드는 [webassembly.sh](https://github.com/wasmerio/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 프로젝트 링크](https://github.com/neurosnap/zmx)
  - macOS에서 텍스트 검색 기능과 **멀티탭 지원**만 추가되면 완벽할 것 같음
- 새로운 **vt100 구현**을 볼 때마다 즐거움  
  지금은 Unreal Engine 5 안에서 동작하는 내 버전을 만들고 있음  
  [스크린샷 모음](https://imgur.com/a/2vsGS0G)  
  Claude와 함께 UE5 Editor 탭 안에서 코딩하는 게 꽤 재밌음. Remote Control API를 통해 아바타 제어, 스크린샷 촬영 등도 가능함. 3D 게임 디버깅에 유용함  
  Claude는 Hyperspace GLSL 셰이더도 만들어주지만, 스크린샷 표 헤더는 제대로 못 맞춤
  - Claude가 UE Editor와 어떻게 상호작용하는지 궁금함. MCP를 통해 Remote Control API를 사용하는지?
- 멋진 작업임 Kyle!  
  [webassembly.sh](https://github.com/wasmerio/webassembly.sh)를 추가하면 브라우저 안에서 **패키지 설치까지 가능한 완전한 셸 환경**이 될 것 같음
  - 훨씬 개선된 데모를 위해 그렇게 할 예정임  
    현재는 명령줄에서만 실행 가능해서 UX가 아쉬움
- 이제 누군가 **Visual Studio Code** (특히 code-server)에 ghostty-web을 터미널로 통합할 수도 있겠음?
  - 맞음, 바로 그게 목표임
- coder 팀을 정말 좋아함. 훌륭한 제품임. Kylecarbs와 팀에게 감사함
  - 사용자로서 고마움