XTerminal

Appearance

Getting Started with XTerminal ​

Installation ​

Below are some of the ways XTerminal can be installed;

  • CDN - (for development with a simple setup)
  • NPM - (use this if you are using bundlers or having a build step)

Production Builds ​

There are two production ready builds:

  • xterminal.umd.js - for the browser (no build tools), it's minified
  • xterminal.esm.js - in case of build tools like Vite or Webpack

Using NPM ​

NPM is a popular javascript package manager on which XTerminal is a public npm package that can be installed by anyone.

To install it, run one of the following commands;

sh
npm install xterminal
sh
pnpm add xterminal
sh
yarn add xterminal

It provides a production build of the latest release from it's GitHub repository.

Usage

First include the styles in your markup:

html
<link rel="stylesheet" href="./node_modules/xterminal/dist/xterminal.css">

Then import the script into your application (ESM build by default).

js
import XTerminal from 'xterminal';

console.log(XTerminal.version);

Using CDN ​

You can use any CDN that serves npm packages;

Install via CDN using one of the following;

html
<link rel="stylesheet" href="https://unpkg.com/xterminal/dist/xterminal.css">
<script src="https://unpkg.com/xterminal/dist/xterminal.umd.js"></script>
html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/xterminal/dist/xterminal.css">
<script src="https://cdn.jsdelivr.net/npm/xterminal/dist/xterminal.umd.js"></script>

Including XTerminal javascript file defines a global property window.XTerminal on the window object. This implies that the XTerminal class is globally accessible.

js
console.log(XTerminal.version);
//or
console.log(window.XTerminal.version);

Next Step ​

Now that you have installed XTerminal, it is time to dive into the essential parts.