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;

::: code-group

npm install xterminal

pnpm add xterminal

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:

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

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

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;

::: code-group

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

<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.

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.

2.1 KiB Raw Blame History