Using addons

Addons are JavaScript modules that use the xterm.js API to extend functionality of the terminal.

There are a handful available in the main repository in the addons directory, but you can even write your own by leveraging on the xterm.js public API.

To use an xterm.js addon, you have to:

  1. Import it into your code
  2. Pass it as argument to the static method Terminal.loadAddon

Usage example

import { Terminal } from '@xterm/xterm';
import { FitAddon } from '@xterm/addon-fit';

const term = new Terminal();
const fitAddon = new FitAddon();
term.loadAddon(fitAddon);

// Open the terminal in #terminal-container
term.open(document.getElementById('terminal-container'));

// Make the terminal's size and geometry fit the size of #terminal-container
fitAddon.fit();

Creating an addon

Creating an addon is quite simple, you just need to export some object that has an activate and dispose method. The following addon logs any onData events coming from the terminal which fire when the user types:

import { Terminal, IDisposable } from '@xterm/xterm';

class DataLoggerAddon {
  private _disposables: IDisposable[] = [];

  activate(terminal: Terminal): void {
    this._disposables.push(terminal.onData(d => console.log(d)));
  }

  dispose(): void {
    this._disposables.forEach(d => d.dispose());
    this._disposables.length = 0;
  }
}

Use Terminal.loadAddon to start logging the data events:

const terminal = new Terminal();
terminal.loadAddon(new ExampleAddon());