# xterm.js — Terminal Emulator Component for the Web

> A TypeScript library that provides a fully featured terminal emulator in the browser, powering the integrated terminals of VS Code, Hyper, and dozens of web-based IDEs and SSH clients.

## Install

Save in your project root:

# xterm.js — Terminal Emulator Component for the Web

## Quick Use
```bash
npm install @xterm/xterm
```
```javascript
import { Terminal } from "@xterm/xterm";
import "@xterm/xterm/css/xterm.css";

const term = new Terminal();
term.open(document.getElementById("terminal"));
term.write("Hello from xterm.js
");
```

## Introduction
xterm.js is a TypeScript-based terminal emulator component that runs entirely in the browser. It implements the VT100/xterm specification, supports Unicode, true color, and GPU-accelerated rendering via WebGL. The library is used by Visual Studio Code, Hyper, and many web-based IDE and DevOps tools to provide embedded terminal experiences.

## What xterm.js Does
- Renders a fully functional terminal emulator inside any web page or Electron app
- Implements VT100, VT220, and xterm escape sequences for broad compatibility
- Supports true color (24-bit), bold, italic, underline, and strikethrough text styles
- Provides WebGL and Canvas rendering backends for high-performance output
- Connects to backend shells via WebSocket, allowing browser-based SSH and PTY sessions

## Architecture Overview
xterm.js consists of a core parser that interprets terminal escape sequences, a buffer manager that tracks cell state and scrollback, and pluggable renderers (DOM, Canvas, WebGL). The library exposes a TypeScript API for input handling, resize events, and addon management. It does not include a built-in shell; instead, applications pair it with a backend PTY process connected through a WebSocket transport (commonly using node-pty or a remote SSH bridge).

## Self-Hosting & Configuration
- Install via npm and import into any JavaScript or TypeScript project
- Attach the terminal to a DOM element with `terminal.open(element)`
- Connect to a backend shell via WebSocket using the attach addon
- Enable the WebGL renderer addon for improved performance with large output
- Configure font family, font size, theme colors, and scrollback via the options object

## Key Features
- WebGL-accelerated rendering for smooth handling of high-throughput output
- Addon architecture: fit, search, image, serialize, Unicode 11, and more
- Accessibility support with screen reader mode
- Link detection and click handling for URLs in terminal output
- Lightweight core (~200 KB gzipped) with tree-shakable addons

## Comparison with Similar Tools
- **Terminal.js** — simpler terminal rendering; xterm.js has broader escape sequence support and addons
- **hterm (Chrome OS)** — Google's terminal component; xterm.js has wider community adoption and addon ecosystem
- **Terminalizer** — records terminal sessions as GIFs; xterm.js is a live interactive emulator
- **blessed / blessed-contrib** — Node.js TUI library for server-side rendering; xterm.js runs in the browser
- **ttyd** — web-based terminal sharing tool; uses xterm.js internally for its frontend rendering

## FAQ
**Q: Does xterm.js include a shell?**
A: No. It is a frontend rendering component. You connect it to a backend shell process via WebSocket or a similar transport.

**Q: Which products use xterm.js?**
A: Visual Studio Code, Hyper, Theia, code-server, Azure Cloud Shell, Google Cloud Shell, and many more.

**Q: Can I customize the look and feel?**
A: Yes. Colors, fonts, cursor style, scrollback size, and other visual properties are configurable through the options API.

**Q: Does it support images in the terminal?**
A: Yes, via the image addon, which supports the iTerm2 and Sixel inline image protocols.

## Sources
- https://github.com/xtermjs/xterm.js
- https://xtermjs.org/

---
Source: https://tokrepo.com/en/workflows/asset-8d073071
Author: AI Open Source