Vanilla JS

The @wterm/dom package provides a framework-free terminal that works with plain HTML/CSS/JS.

Install

npm install @wterm/dom

Usage

<div id="terminal"></div>

<script type="module">
  import { WTerm } from "@wterm/dom";
  import "@wterm/dom/css";

  const term = new WTerm(document.getElementById("terminal"), {
    onTitle(title) {
      document.title = title;
    },
  });

  await term.init();
</script>

Custom Input Handling

By default, typed input is echoed back to the terminal. Pass onData when you need control over input — for example, sending it to a server:

const term = new WTerm(document.getElementById("terminal"), {
  onData(data) {
    socket.send(data);
  },
});

await term.init();

Options and Methods

The WTerm constructor accepts all shared terminal options (cols, rows, wasmUrl, autoResize, cursorBlink, onData, onTitle, onResize).

See WTerm Methods for the full list of instance methods (init, write, resize, focus, destroy).

Themes

Import the stylesheet and apply a theme class to the terminal element:

import "@wterm/dom/css";

Built-in themes: theme-solarized-dark, theme-monokai, theme-light:

element.classList.add("theme-monokai");

All colors use CSS custom properties (--term-fg, --term-bg, --term-color-0 through --term-color-15) so you can define your own theme with plain CSS.

WebSocket Transport

Connect to a PTY backend over WebSocket:

import { WTerm, WebSocketTransport } from "@wterm/dom";

const term = new WTerm(el, { cols: 80, rows: 24 });
await term.init();

const ws = new WebSocketTransport({
  url: "ws://localhost:8080/pty",
  onData: (data) => term.write(data),
});

ws.connect();
term.onData = (data) => ws.send(data);

See the full WebSocketTransport reference for all options, methods, and properties.