React

The @wterm/react package provides a <Terminal> component and a useTerminal hook for integrating wterm into React applications.

Install

npm install @wterm/dom @wterm/react

Basic Usage

import { Terminal } from "@wterm/react";
import "@wterm/react/css";

function App() {
  return <Terminal />;
}

Custom Input Handling

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

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

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

  return (
    <Terminal
      ref={ref}
      onData={(data) => {
        socket.send(data);
      }}
    />
  );
}

Props

The <Terminal> component accepts all shared terminal options (cols, rows, wasmUrl, autoResize, cursorBlink, onData, onTitle, onResize) plus React-only props (theme, onReady, onError).

Standard div props (className, style, id, etc.) are forwarded to the container element.

useTerminal Hook

Returns a ref and imperative helpers:

const { ref, write, resize, focus } = useTerminal();

See the full Imperative Handle reference for all returned methods and the TerminalHandle interface.

Themes

Import the stylesheet and switch themes via the theme prop:

import "@wterm/react/css";

<Terminal theme="monokai" />

Built-in themes: solarized-dark, monokai, light. Define custom themes with CSS custom properties (--term-fg, --term-bg, --term-color-0 through --term-color-15).

Next.js

For Next.js, add @wterm/dom and @wterm/react to transpilePackages in your config:

// next.config.mjs
const nextConfig = {
  transpilePackages: ["@wterm/dom", "@wterm/react"],
};