Configuration

Options

Both the React Terminal component and the vanilla WTerm constructor accept the same core options — cols, rows, wasmUrl, autoResize, and cursorBlink — plus event callbacks onData, onTitle, and onResize.

See the full API Reference for types, defaults, and descriptions.

React-only

The React Terminal component adds theme, onReady, and onError on top of the shared options. It also spreads standard HTML attributes onto the root div, so you can pass className, style, ARIA attributes, and other DOM props directly.

See React-Only Props for details.

Imperative Handle (React)

When using useTerminal, the returned ref exposes an imperative handle:

import { Terminal, useTerminal } from "@wterm/react";

function App() {
  const { ref } = useTerminal();

  return (
    <Terminal
      ref={ref}
      onReady={(wt) => {
        wt.resize(120, 40);
      }}
    />
  );
}

See the full Imperative Handle reference for all returned methods.

WebSocket Transport

For connecting to a remote shell over WebSocket, use the built-in WebSocketTransport:

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

const ws = new WebSocketTransport({
  url: "wss://your-server.example/shell",
  reconnect: true,
  maxReconnectDelay: 5000,
  onData(data) {
    term.write(data);
  },
  onOpen() {
    console.log("connected");
  },
  onClose() {
    console.log("disconnected");
  },
});

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

await term.init();
ws.connect();

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

The transport buffers any send() calls made before the connection is open and flushes them automatically on connect.