skills.rest
acaprino
acaprinoCOMMUNITY
Explore all skills by this author →
GitHub

xtermjs-skill

Embed and configure xterm.js terminal emulators in web and Electron applications.

6|2|Updated Jan 6, 2026
Search Tags:#theming#react#terminal#xterm.js#web#addons#pty
One-click install
npx skills add https://github.com/acaprino/claude-code-daodan --skill xtermjs-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: xtermjs-skill
Source: https://github.com/acaprino/claude-code-daodan/tree/main/plugins/xterm/skills/xtermjs-skill
Command: npx skills add https://github.com/acaprino/claude-code-daodan --skill xtermjs-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Building and integrating a robust terminal UI in web or Electron apps can be complex; this guide provides expert guidance on using xterm.js to embed, configure, and customize terminal emulators with optional addons and backend integration.

Core Features & Use Cases

  • Embed xterm.js in web apps and Electron with optional addons (FitAddon, AttachAddon, SearchAddon, WebglAddon, etc.)
  • Configure themes, key handlers, parser hooks, and PTY backends (node-pty)
  • Provide React/Vue/Angular integration patterns, debugging tips, and production-ready workflows for terminal-driven interfaces

Quick Start

Install the xterm packages, import the xterm.css, and create and open a Terminal inside your app.

Frequently Asked Questions about xtermjs-skill

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I embed a terminal emulator in a React web application?▼

To embed a terminal emulator in React, install xterm.js packages, import the required CSS, and instantiate a Terminal object within your component lifecycle, using specific React integration patterns to manage DOM attachment and teardown.

What is the best way to connect a browser-based terminal to a backend PTY?▼

Connecting a browser-based terminal to a backend PTY involves using node-pty on the server to spawn processes and attaching the xterm.js frontend instance to the PTY stream via AttachAddon for bidirectional data flow.

How do I configure themes and custom key handling in xterm.js?▼

Configuring themes and key handling in xterm.js involves passing theme color objects to the Terminal constructor and registering custom key sequences or parser hooks to intercept and manipulate keyboard input.

Does xterm.js work with Electron for building desktop terminal applications?▼

Yes, xterm.js works with Electron for building desktop terminal applications, allowing you to embed a fully configured terminal emulator interface within an Electron renderer process and link it to a local PTY backend.

What addons are needed to resize and search content in a web terminal?▼

To resize and search content in a web terminal, you need the FitAddon to automatically adjust terminal dimensions to its container and the SearchAddon to enable find and highlight functionality within the buffer.

Why is my xterm.js terminal rendering slowly and how do I fix it?▼

If your xterm.js terminal is rendering slowly, loading the WebglAddon offloads text rendering to the GPU, significantly improving performance and resolving common high-throughput visual bottlenecks.

Related Skills

Explore More Software Engineering Skills→
TbK0ngTbK0ng

trellis-bootstrap

Initialize Trellis AI workflow scaffolding with .trellis structure, memory, and CLI hooks.

Community
Intermediate
tincoppertincopper
10

xterm-js

Build and configure xterm.js terminal emulators for web and Electron apps.

Community
Advanced
James-GamboaJames-Gamboa

tailwind-css-patterns

Create consistent Tailwind CSS patterns for responsive UI development.

Community
Intermediate
LuminairPrimeLuminairPrime

terminal-expert

Guide terminal implementation in VS Code extensions using xterm.js and PTY integration.

Community
Advanced