XTerminal

Appearance

Output ​

Information maybe output in a number of ways and logged in the terminal instance with the help of term.write() or term.writeln().

Raw Data ​

Raw data may include strings and numbers.

Here is a simple hello world example:

js
term.write('Hello World!');
Result:
My First Terminal
Hello World!▊

With an optional callback function,

js
term.write('Hello World!', () => console.log('Done!'));
// Done!

Escape characters ​

Below is a list of available and ready to use escape characters;

  • \n - New line

    When the \n character is encountered in the data to output, it moves the cursor to the next line. The data, after every instance of the \n character, is rendereed on a new line.

    Example:

    js
    term.write(`Hello World!\n$ `);
    Result:
    My First Terminal
    Hello World!
$ ▊

    The same can be achieved using term.writeln() which writes the data passed on the current line, followed by a new line character.

    js
    term.writeln(`Hello World!`);
term.write('$ ');

  • \t - Tab

    The tab character defaults to four (4) space characters.

    Example:

    js
    term.writeln(`Hello World!\tYou're Welcome.`);
    Result:
    My First Terminal
    Hello World!    You're welcome.
▊

HTML Strings ​

You might want to output some HTML string, here is how you can do it;

js
term.writeln(`<b>Bold Text</b> - <i>Italics</i>`);
Result:
My First Terminal

Bold Text - Italics
▊

Attributes ​

To output valid HTML tags with attributes, there must be a single space separation between the attributes in every opening tag.

For example: The following won't work as expected

js
term.writeln('<b     class="text-blue">Bold Blue Text</b>');

term.writeln('<b style="color: dodgerblue    ">Bold Blue Text</b>');

Here is how it should be done

js
term.writeln('<b     class="text-blue">Bold Blue Text</b>'); 
term.writeln('<b class="text-blue">Bold Blue Text</b>'); 

term.writeln('<b style="color: dodgerblue    ">Bold Blue Text</b>'); 
term.writeln('<b style="color: dodgerblue">Bold Blue Text</b>');

However, multiple spaces are okay in between the opening and closing tags.

For example:

js
term.writeln('<b style="color: dodgerblue">Bold      Blue      Text</b>');

Clear Screen ​

To clear the entire terminal, you can do it programmatically using term.clear().

js
term.clear();

Clear Last Output ​

To remove the output for the previous write operation, term.clearLast() does the job.

INFO

This is like the undo method but for only one output operation.

Example:

js
term.writeln('Welcome to Space!');
term.writeln('Loading...');
term.clearLast();
Result:
My First Terminal

Welcome to Space!
▊

It is useful in several cases for example when implementing a loader.

Example: 5s loader

  • Styles

    css
    .spinner:after {
  animation: changeContent 0.8s linear infinite;
  content: "⠋";
}

@keyframes changeContent {
  10% { content: "⠙"; }
  20% { content: "⠹"; }
  30% { content: "⠸"; }
  40% { content: "⠼"; }
  50% { content: "⠴"; }
  60% { content: "⠦"; }
  70% { content: "⠧"; }
  80% { content: "⠇"; }
  90% { content: "⠏"; }
}

  • Script

    js
    term.write('<span class="spinner"></span> Loading...');

setTimeout(() => term.clearLast(), 5000);

Next Step ​

Work with terminal events that help you trigger actions on the go.