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$ `);

  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.

  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.`);

  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;

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

Result:

My First Terminal

Bold Text - Italics
▊

Safe Output

⚠️ CRITICAL SECURITY WARNING

ALWAYS use term.writeSafe() or term.writelnSafe() for ANY data from untrusted sources.

These methods automatically sanitize the data before rendering it to the terminal, preventing XSS (Cross-Site Scripting) attacks.

Never Do This ❌

• User input: term.writeln(userInput) - If a user enters <img onerror="alert('hacked')" />, the script runs!
• External APIs: term.writeln(response.data) - A malicious GitHub bio or similar field could inject code
• Form data: term.writeln(formField) - Users could craft HTML payloads in forms

Always Do This ✅

For untrusted data (user input, API responses, form submissions):

// Safe methods that automatically escape HTML
term.writeSafe(userInput);
term.writelnSafe(apiResponse.name);
term.writelnSafe(formField);

HTML Output with Safe Data Sanitization

If you need to output HTML markup while keeping data safe, use XTerminal.escapeHTML():

// Mix safe HTML structure with escaped user data
const name = apiResponse.name;  // Could be malicious!
term.writeln(`<span class="user">${XTerminal.escapeHTML(name)}</span>`);

Additional Resources: For complex sanitization, consider external libraries like DOMPurify.

Example 1: Escape HTML for Safe Display

When you need to display untrusted data (like arbitrary text), use term.writeSafe():

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

Result:

My First Terminal

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

Example 2: Safe Output with HTML Structure

Use XTerminal.escapeHTML() to safely embed untrusted data within custom HTML markup:

// UNSAFE - User data could contain malicious scripts
const userName = `<img onerror="alert('hacked')" />`;
term.writeln(`<p class="user">${userName}</p>`);  // Vulnerable!

// SAFE - Data is properly escaped
const userName = `<img onerror="alert('hacked')" />`;
term.writeln(`<p class="user">${XTerminal.escapeHTML(userName)}</p>`);

Result:

My First Terminal

<img onerror="alert('hacked')" />
▊

Example 3: Processing External API Responses

// UNSAFE - API data could be malicious
fetch('/api/user')
    .then(res => res.json())
    .then(user => term.writeln(`User: ${user.name}`));

// SAFE - Use writeSafe for untrusted external data
fetch('/api/user')
    .then(res => res.json())
    .then(user => term.writelnSafe(`User: ${user.name}`));

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.