Configuration

Options

Both the React Terminal component and the vanilla WTerm constructor accept the same core options:

Option	Type	Default	Description
`cols`	`number`	`80`	Number of columns
`rows`	`number`	`24`	Number of rows
`wasmUrl`	`string`	`"wterm.wasm"`	URL to the WASM binary
`autoResize`	`boolean`	`true` (vanilla) / `false` (React)	Automatically resize to fit the container using a `ResizeObserver`
`cursorBlink`	`boolean`	`false`	Enable cursor blinking animation

Event Callbacks

Callback	Type	Description
`onData`	`(data: string) => void`	Called when the terminal produces output (user input or emulator response)
`onTitle`	`(title: string) => void`	Called when the terminal title changes via an escape sequence
`onResize`	`(cols: number, rows: number) => void`	Called after the terminal is resized

React-only

The React Terminal component adds two extra props:

Prop	Type	Description
`onReady`	`(wt: WTerm) => void`	Fires with the underlying `WTerm` instance once initialization completes
`theme`	`string`	Name of a built-in or custom theme (see Themes)

The component also spreads standard HTML attributes onto the root div, so you can pass className, style, ARIA attributes, and other DOM props directly.

Imperative Handle (React)

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

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

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

  return (
    <Terminal
      ref={ref}
      wasmUrl="/wterm.wasm"
      onReady={(wt) => {
        wt.resize(120, 40);
      }}
      onData={(data) => write(data)}
    />
  );
}

Method	Type	Description
`write`	`(data: string \| Uint8Array) => void`	Write data to the terminal
`resize`	`(cols: number, rows: number) => void`	Resize the terminal grid
`focus`	`() => void`	Focus the terminal element
`instance`	`WTerm \| null`	Direct access to the underlying `WTerm` instance

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"), {
  wasmUrl: "/wterm.wasm",
  onData(data) {
    ws.send(data);
  },
});

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

Option	Type	Default	Description
`url`	`string`	—	WebSocket server URL
`reconnect`	`boolean`	`true`	Automatically reconnect on disconnect
`maxReconnectDelay`	`number`	`30000`	Maximum delay between reconnection attempts (ms), with exponential backoff
`onData`	`(data: Uint8Array \| string) => void`	—	Called when data is received from the server
`onOpen`	`() => void`	—	Called when the connection opens
`onClose`	`() => void`	—	Called when the connection closes

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