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.


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">
    <code class="termino-console">
      <!-- Console -->
  <textarea class="termino-input" rows="1" wrap="hard">
    <!-- Input -->

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
// delay functions
// enable/disable input
// ask questions
// scroll to the bottom
// scroll to the top
// add an element
// remove an element
// kill the terminal

Create your own commands.

function help() {
  myTerm.output("Help message")
async function quit_terminal() {
  myTerm.output("Quitting Terminal...")
// ...

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 

For more advanced usage such as adding your own commands, creating animations & etc. See the live examples here or you can find the Termino.js documentation here.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Table of Contents