Simple Web Terminal


> A simple and lightweight Javascript web browser terminal

Web apps are great. But sometimes instead of all the double-clicks, mouse pointers, taps and swipes across the screen - you just want good old keyboard input. This terminal runs in a browser, desktop or mobile. It provides a simple and easy way to extend the terminal with your own commands.

How to use

Include web-terminal.js in your HTML:

``html

`

Define an HTML div tag where the terminal will be contained:

`html



`

Create a new terminal instance and convert the DOM element into a live terminal.

`js
const terminal = new WebTerminal();
`

If you want use another DOM element as container just set the property container:

`js
const terminal = new WebTerminal({ container: 'my-terminal-container' });
`

$3

If you want add your own commands to the terminal just pass a object using the property as your command and the value as the callback.

`js
const commands = {
switch: (terminal) => {
terminal.output('This is a custom command of web terminal.')
terminal.setPrompt('Custom Prompt > ');
},

ping: (instance, parameters) => {
instance.output('Ping to ${parameters[0]}...');
},
};

const terminal = new WebTerminal({ commands });
`

Now in your terminal could type your new commands:

`bash
> help
These shell commands are defined internally:
flavour, ping, clear, help, version, wipe

> switch
This is a custom command of web terminal.
Custom Prompt >
`

Color Support

WebTerminal includes sophisticated colored output with contextual highlighting that automatically detects and colorizes different types of content - similar to syntax highlighting in modern code editors.

$3

`js
// Create terminal with colors enabled (default)
const terminal = new WebTerminal({
colors: true, // Enable contextual coloring
colorTheme: 'light' // Color theme: 'light' or 'dark'
});
`

$3

- Contextual Coloring - Automatic detection of numbers, strings, booleans, URLs, file paths, commands, and more
- Multiple Themes - Light and dark color schemes
- Message Types - Built-in error, success, warning, and info styling with icons
- JSON Syntax Highlighting - Automatic formatting for JSON objects
- ANSI Support - Standard terminal escape sequences
- Runtime Controls - Toggle colors and themes on-the-fly

$3

`js
// Automatic contextual coloring
terminal.output('Server running on port 3000 with debug=true');

// Message types with icons
terminal.success('File saved successfully!');
terminal.error('Connection failed');

// JSON highlighting
terminal.outputJSON({name: "app", version: "1.0.0"});

// Built-in commands
> colors demo # Show color examples
> theme dark # Switch to dark theme

// Demo commands (available in examples)
> ls # Directory listing (in demo files)
> json # JSON example (in demo files)
`

📖 For complete color documentation, see docs/colors.md

🎨 For live examples, see examples/ folder

Methods

$3

`js
terminal.clear();
`

$3

`js
terminal.output('I like ice-cream.');
`

`bash
I like ice-cream.
>
`

$3

`js
terminal.prompt('Type your name', (name) => {
terminal.output(Hi ${name}!);
});
`

`bash
Type your name: javi
Hi javi!
>
`

$3

`js
terminal.onInput((command, parameters) => {
console.log('⚡️onInput', command, parameters);
});
`

$3

`js
terminal.setPrompt('user @ web');
`

`bash
user @ web >
`

Development

$3

`bash


Install dependencies

yarn install

Run tests

yarn test

Build the project

yarn build
`

$3

`text
terminal/
├── src/ # Source code
│ ├── WebTerminal.js # Main terminal class
│ ├── WebTerminal.css # Terminal styles
│ ├── index.js # Entry point
│ └── modules/ # Modular components
├── docs/ # Documentation
│ ├── colors.md # Color system guide
│ ├── testing.md # Testing documentation
│ └── development.md # Development guide
├── test/ # Test files
├── examples/ # Demo files and examples
└── dist/ # Built files
``

$3

- 📖 Color System Guide - Comprehensive color features documentation
- 🧪 Testing Guide - Test setup, running tests, and writing new tests
- ⚙️ Development Guide - Architecture, contributing, and advanced topics
- 🔄 Compatibility Guide - Version compatibility and migration information

$3

The project includes comprehensive test coverage for:

- Core terminal functionality
- Color system and contextual highlighting
- Command processing and custom commands
- DOM manipulation and event handling

License

This repository is a fork from the https://github.com/soyjavi/vanilla-terminal and is licensed under the MIT License.