Powerful And Intuitive Web Terminal Component – Termino.js
Termino.js is a JavaScript library that enables you to easily integrate a powerful, extendable, and intuitive terminal into your webpage.
Descriptions
Termino.js is a highly customizable front-end component written in pure JavaScript that is great for making web based terminal animations, games & apps on any website including support for curses-based apps, custom functions on user commands, key-code & mouse events & much more!
ie: You can use this JavaScript library to create web based terminals on any website.
Key Features
- Lightweight and easy to implement
- Support HTML content.
- Allows you to create custom commands.
- With no third-party dependencies.
- Fast: Termino.js is lightweight – being built in pure JavaScript
- Self-contained: Requires zero dependencies to work.
- Great for animations: You can make terminal animations with ease & bring your favourite typewriter library in or etc!
- Easy to customize: Bring your own HTML, CSS & customize / create a terminal to your liking!
- Inputs: Supports inputs for questions returned via a promised / await based value
- Multiple instances: Create more than one custom terminal in a page!
- HTML support: Add HTML elements such as links and more to your terminal!
- Custom functions: Create your own custom functions with ease (including user-command functions, key-code functions & your own mouse event functions)
- And much more: the options are endless!
How to Use
Import the Termino as a module.
import {Termino} from './dist/termino.min.js';
Create the HTML for the web terminal.
<div id="terminal">
<pre>
<code class="termino-console">
<!-- Console -->
</code>
</pre>
<textarea class="termino-input" rows="1" wrap="hard">
<!-- Input -->
</textarea>
</div>
Create a default web terminal on the page.
let myTerm= Termino(document.getElementById("terminal"))
Output the strings using the echo or output commands.
// with caret
myTerm.echo("Hello world!");
// without caret
myTerm.output("Hello world!");
More built-in commands (functions).
// clear myTerm.clear(); // delay functions myTerm.delay(delay); // enable/disable input myTerm.enable_input(); myTerm.disable_input(); // ask questions myTerm.input(ask); // scroll to the bottom myTerm.scroll_to_bottom(); // scroll to the top myTerm.scroll_to_top(delay); // add an element myTerm.add_element(elementID); // remove an element myTerm.remove_element(elementID); // kill the terminal myTerm.kill();
Create your own commands.
function help() {
myTerm.output("Help message")
}
async function quit_terminal() {
myTerm.output("Quitting Terminal...")
myTerm.delay(3000)
myTerm.kill()
}
// ...
Override the default keybindings.
let myKeys = [
{
"id": "SCROLL_UP_KEY",
"key_code": 38
// "function": example()
}, {
"id": "SCROLL_DOWN_KEY",
"key_code": 40
// "function": example()
},
// ...
];
let myTerm= Termino(document.getElementById("terminal"), myKeys)
Config the web terminal by passing the options object as the third parameter to the Termino method:
let myTerm= Termino(document.getElementById("terminal"), myKeys,{
allow_scroll: true,
prompt: "> ",
command_key: 13,
terminal_killed_placeholder: "TERMINAL DISABLED",
terminal_output: ".termino-console",
terminal_input: ".termino-input",
disable_terminal_input: false
})
More Details
