Vanilla JavaScript Shell Terminal Emulator With Async/Await Functions – jsShell.js

Category: Javascript | March 4, 2023
Views Total:351 views
Official Page:Go to website
Last Update:March 4, 2023


Vanilla JavaScript Shell Terminal Emulator With Async/Await Functions – jsShell.js


An easy yet feature-rich JavaScript shell emulator (also known as bash terminal) that allows users to execute commands or interact with your app directly in the web browser.

How to use it:

1. Install and import the jsShell.js.

# Yarn
$ yarn add js-shell-emulator
$ npm i js-shell-emulator
import { JsShell } from './jsShell.js';

2. Create a basic terminal interface on the page.

<div id="shell"></div>
const shell = new JsShell('shell');

3. Register commands as follows:

const commands = {
      clear: {
        handler: (shell) => {
        description: 'Clear console.'
      exit: {
        handler: (shell) => {
        description: 'Stop the shell prompt'
      custom: {
        handler: customFunction,
        description: 'Custom function'
      // more commands here
// custom function
async function customFunction(shell) {
      // ...

4. API methods.

  .setPrompt('$ ')
   setMargin('2rem auto')
  .setBlinking(true) //blinking cursor
  .setPrompt('$ ')
  .print('Plain text!')
  .printHTML("HTML content")
  .write("without line break")
  .type("with typing animation", 50)
  .clear() // clear the screen
// Ask for plain text
let name = await shell.input("What's your name?")
// Ask for a password
let secret = await shell.password("Enter your password")
// Ask for confirmation. "(y/n)" will be append at the end of the question. 
let confirm = await shell.confirm("Are you sure?")
// Wait a second
await JsShell.sleep(1000)
// Give user a break
await shell.pause("Press any key to continue.")

5. Available options to customize the terminal interface.

const shell = new JsShell('#container', {
      backgroundColor: '#000',
      fontFamily: 'Ubuntu Mono, Monaco, Courier, monospace',
      textColor: '#fff',
      textSize: '1em',
      forceFocus: false, 
      promptPS: '', 
      width: '100%', 
      height: '300px',
      margin: '0',
      overflow: 'auto',
      whiteSpace: 'break-spaces',
      padding: '10px',
      className: 'jsShell',
      cursorType: 'large',
      cursorSpeed: 500,    

You Might Be Interested In:

Leave a Reply