Creating Your First Terminal

Terminal instance

The XTerminal package exports the XTerminal class by default for public consumption. To create your own terminal, you need to create an instance of it.

const term = new XTerminal();

Mounting the terminal

There will be nothing rendered on your page not until the target element is provided via the constructor options or term.mount() method is called.

For example: Let's say our app container is #app, then the markup should be;

<div id="app"></div>

Initialize the terminal instance with #app as the target using one of the following:

• CSS selector

  const term = new XTerminal();
  term.mount("#app"); 

• DOM reference

  const term = new XTerminal();
  term.mount( 
      document.querySelector("#app") 
  ); 

• Options object

  const term = new XTerminal(); 
  const term = new XTerminal({ 
      target: "#app" // or document.querySelector("#app")
  }); 

Choosing one of the above basically sets up the terminal HTML structure, key bindings added, and then rendered in the target element #app.

Multiple terminal instances

You can create several single terminal instances on the same page since the XTerminal class creates an independent instance for each of them.

Example:

const term1 = new XTerminal();
term1.mount("#app1");

const term2 = new XTerminal();
term2.mount("#app2");

const term3 = new XTerminal();
term3.mount("#app3");

Each one of the created instances can be configured to work differently independent of the others.

Next Step

Configure the terminal to suite your application needs.