web-terminal-lite/index.js

A lightweight in-browser terminal that simulates a shell-like experience

import { Terminal } from 'xterm';
import 'xterm/css/xterm.css';
import './style.css';

export function createTerminal(containerId = 'terminal') {
  const term = new Terminal();
  const container = document.getElementById(containerId);
  if (!container) {
    console.error(`Element with id '${containerId}' not found.`);
    return;
  }

  term.open(container);
  term.writeln("Browser Terminal Ready");
  term.write('$ ');

  let command = '';

  term.onKey(({ key, domEvent }) => {
    if (domEvent.key === 'Enter') {
      term.writeln('');
      term.write('$ ');
      command = '';
    } else if (domEvent.key === 'Backspace') {
      if (command.length > 0) {
        command = command.slice(0, -1);
        term.write('\b \b');
      }
    } else {
      command += key;
      term.write(key);
    }
  });
}