ghostty-web

Ghostty for the web with xterm.js API compatibility — giving you a proper VT100 implementation in the browser.

• Migrate from xterm by changing your import: @xterm/xterm → ghostty-web
• WASM-compiled parser from Ghostty—the same code that runs the native app
• Zero runtime dependencies, ~400KB WASM bundle

Originally created for Mux (a desktop app for isolated, parallel agentic development), but designed to be used anywhere.

Try It

• Live Demo on an ephemeral VM (thank you to Greg from disco.cloud for hosting).

• On your computer:

  npx @ghostty-web/demo@next

  This starts a local HTTP server with a real shell on http://localhost:8080. Works best on Linux and macOS.

Comparison with xterm.js

xterm.js is everywhere—VS Code, Hyper, countless web terminals. But it has fundamental issues:

Issue	xterm.js	ghostty-web
Complex scripts (Devanagari, Arabic)	Rendering issues	✓ Proper grapheme handling
XTPUSHSGR/XTPOPSGR	Not supported	✓ Full support

xterm.js reimplements terminal emulation in JavaScript. Every escape sequence, every edge case, every Unicode quirk—all hand-coded. Ghostty's emulator is the same battle-tested code that runs the native Ghostty app.

Keyboard encoding

Keyboard input is encoded by Ghostty's key encoder. Byte sequences largely match xterm.js's defaults — Home/End honor DECCKM, Shift+nav and Shift+F-keys preserve the Shift modifier in the emitted CSI sequence, non-BMP characters pass through, Arrow keys honor cursor-application mode. Two deliberate differences:

• Shift+Enter is distinguishable from Enter (emitted as \x1b[27;2;13~ rather than bare \r, following fixterms), so modern line editors and REPLs can treat Shift+Enter as a newline-without-submit.
• Kitty keyboard protocol and xterm modifyOtherKeys state 2 are supported when an app enables them. xterm.js implements only the traditional escape sequences.

If you need byte-for-byte xterm.js behavior for a specific key (e.g. Shift+Enter mapped to \r for tools that don't understand the fixterms sequence), intercept it in attachCustomKeyEventHandler and emit the bytes you want via term.input(bytes, true):

term.attachCustomKeyEventHandler((e) => {
  if (e.key === 'Enter' && e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
    term.input('\r', true); // fires onData with '\r'
    return true; // suppress the default encoder path
  }
  return false;
});

Installation

npm install ghostty-web

Usage

ghostty-web aims to be API-compatible with the 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);

For a comprehensive client <-> server example, refer to the demo.

Development

ghostty-web builds from Ghostty's source with a patch to expose additional functionality.

Requires Zig and Bun.

bun run build

Mitchell Hashimoto (author of Ghostty) has been working on libghostty which makes this all possible. The patches are very minimal thanks to the work the Ghostty team has done, and we expect them to get smaller.

This library will eventually consume a native Ghostty WASM distribution once available, and will continue to provide an xterm.js compatible API.

At Coder we're big fans of Ghostty, so kudos to that team for all the amazing work.

License

MIT