Xterm.js is a frontend component that enables applications to bring fully-featured terminals to their users in the browser. It's used by popular projects such as VS Code (and its forks), Tabby and Hyper.
Features
- Terminal apps just work: Xterm.js works with most terminal apps such as
bash, vim, and tmux, including support for curses-based apps and mouse events.
- Performant: Xterm.js is really fast and includes an optional GPU-accelerated renderer.
- Rich Unicode support: Supports CJK, emojis, and IMEs.
- Self-contained: The core library has zero dependencies.
- Accessible: Screen reader mode and minimum contrast ratio support can be turned on.
- And much more: Links, theming, custom glyphs, addons, well documented API, etc.
What xterm.js is not
- Xterm.js is not a terminal application that you can download and use on your computer.
- Xterm.js is not
bash. Xterm.js can be connected to processes like bash and let you interact with them (provide input, receive output) through a library like node-pty.
Getting Started
First, you need to install the module. We ship exclusively through npm, so you need that installed and then add @xterm/xterm as a dependency by running:
npm install --save @xterm/xterm
The recommended way to load xterm.js with the ES module syntax, either using TypeScript or a modern JS tooling. Note that both CommonJS and ES module files are shipped with the npm package.
import { Terminal } from '@xterm/xterm';
Then instantiate a Terminal object, open it on an element and write to it:
const term = new Terminal();
term.open(document.getElementById('terminal'));
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
Most use cases will hook up input and output to a pseudoterminal API such as node-pty which will drive the terminal.
pty.onData(data => term.write(data));
term.onData(data => pty.write(data));
Then make sure to also include the css/xterm.css file, for example in HTML:
<link rel="stylesheet" href="node_modules/@xterm/xterm/css/xterm.css" />
Standalone example
Here is a complete standalone example in a HTML file:
<!doctype html>
<html>
<head>
<link rel="stylesheet" href="node_modules/@xterm/xterm/css/xterm.css" />
<script src="node_modules/@xterm/xterm/lib/xterm.js"></script>
</head>
<body>
<div id="terminal"></div>
<script>
const term = new Terminal();
term.open(document.getElementById('terminal'));
term.write('Hello from \x1B[1;3;31mxterm.js\x1B[0m $ ')
</script>
</body>
</html>
Addons
Addons are separate modules that extend the Terminal by building on the xterm.js API. To use an addon, you first need to install it in your project:
npm install --save @xterm/addon-web-links
Then import the addon, instantiate it and call Terminal.loadAddon:
import { Terminal } from '@xterm/xterm';
import { WebLinksAddon } from '@xterm/addon-web-links';
const terminal = new Terminal();
// Load WebLinksAddon on terminal, this is all that's needed to get web links
// working in the terminal.
terminal.loadAddon(new WebLinksAddon());
The xterm.js team maintains the following addons, but anyone can build them:
This is the beginning of the README. Read the rest at the original. Read the full README ↗
