Output

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

Raw Data

Raw data may include strings and numbers.

Here is a simple hello world example:

term.write("Hello World!");

Result:

My First Terminal

Hello World!▊

With an optional callback function,

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

When dealing with arbitrary (untrustworthy) data like user input or remote resources, use term.writeSafe to securely print to the terminal. For more details, see HTML Strings section.

const someData = "...";

term.writeSafe(someData);

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:

  term.write(`Hello World!\n$ `);

  <browser-preview>
  
    Hello World!
    $ ▊
  
  </browser-preview>
  

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

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

• \t - Tab

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

  Example:

  term.writeln(`Hello World!\tYou're Welcome.`);

  <browser-preview>
  
    Hello World!    You're welcome.
    ▊
  
  </browser-preview>
  

HTML Strings

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

term.writeln(`<b>Bold Text</b> - <i>Italics</i>`);

Result:

My First Terminal

Bold Text - Italics
▊

Safe Output

WARNING

• Use term.writeSafe() or term.writelnSafe() to safely output arbitrary data to the terminal. These methods sanitize the data before being output to the terminal, specifically, before appending it to the DOM.

Avoid outputting data from arbitrary sources like user input or remote sources (such as images).
Doing so has been proved to allow for malicious attacks like XSS where a user may input some HTML code that could potentially expose user information such as session cookies or even inject malicious scripts on the page.

For example: term.writeln("<img onerror=alert('hacked') />") would run the malicious script and you would see an alert dialog.

Additionally use XTerminal.escapeHTML() or external libraries like DOMPurify to sanitize arbitrary data before outputting it using term.write() or term.writeln(). See examples below.

term.writelnSafe(`<b>Bold Text</b> - <i>Italics</i>`);

Result:

My First Terminal

<b>Bold Text</b> - <i>Italics</i>
▊

Use XTerminal.escapeHTML() to sanitize some data before printing it.

This is helpful when using HTML containers for some other data like showing errors in red.

const err = `<img onerror="alert('hacked')" />`

term.writeln(`<p style="color:red">${XTerminal.escapeHTML(err)}</p>`)

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

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

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:

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

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:

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

  .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

  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.