Create Custom Terminals With Pure JavaScript And CSS – shell.js

The shell.js JavaScript library provides an easy way to create Ubuntu, OS X, Windows, and Custom style bash terminal on the web application.

Installation:

# Yarn
$ yarn add shell.js
# NPM
$ npm install shell.js --save

How to use it:

1. Import the shell.js into your web project.

<script src="/path/to/shell.js"></script>

2. Create a placeholder element for the terminal.

<div id="default"></div>

3. Generate a default terminal inside the element and define an array of commands as follows:

const myShell = Shell('#default', ['sudo -i', 'rm -rf /', 'exit']);
// type the commands.
myShell.type()

4. Set the styles of the terminal.

Shell('#default', commands, {
  style: {
    // "default"|"ubuntu"|"macos"|"windows" 
    engine: 'default', 
    responsive: true,
    shadow: true,
    // "dark"|"light"
    theme: 'dark',
  },
});

5. Set the user/host/path displayed in the terminal.

Shell('#default', commands, {
    user: 'guest',
    host: 'CSSSCRIPT',
    path: '/etc/',
});

6. You can also use the typed.js library to create a typing effect in the terminal.

<script src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.6/typed.min.js"></script>

Shell('#default', commands, {
  typing: {
    // Typed.js instance
    ctor: null,
    // Typed.js options
    otps: {}
  },
});

7. Determine whether the current user is root. Default: false.

Shell('#default', commands, {
  root: true,
});

Changelog:

v4.3.4 (10/06/2023)

• Applied security fixes

v4.3.3 (01/08/2023)

• Added postcss dependency

v4.3.2 (01/07/2023)

• Audit vulnerabilities
• Added config file for postcss
• Updated release workflow

v4.3.1 (09/04/2022)

• Increased code coverage

v4.3.0 (09/04/2022)

• Added commands parameter to type method
• Added clear method to empty terminal
• Removed commands parameter from constructor

v4.2.0 (08/20/2022)

• Removed style key from config

v4.1.0 (08/16/2022)

• Renamed exported library to Shell (formerly shell)
• Fixes some CSS issue

v4.03 (08/07/2022)

• Added feature to create custom input/output functions
• Added function to trigger typing
• Updated parameter names
• Updated code using functional programming
• Updated Webpack configuration
• Updated folders structure
• Removed support for Bower
• Removed Shell constructor

v3.3.1 (09/18/2021)

• Bumped dependencies versions to fix vulnerabilities
• Refactored and reformatted code
• Cleaned package from registries

v3.2.2 (09/13/2020)

• Fixed vulnerabilities

v3.2.1 (08/22/2020)

• Fixed vulnerabilities
• Fixed statusbar buttons padding

v3.2.0 (04/28/2020)

• Added commands input/output
• Added multiple output
• Fixed vulnerabilities

01/20/2020

• v3.1.1: Fixed dependency vulnerabilities

10/12/2018

• v3.1.0: Fix responsive behaviour

10/12/2018

• v3.1.0: Fix responsive behaviour

07/04/2018

• Inherit correct color for title

07/02/2018

• Lots of fixes

06/13/2018

• v3.0.0-rc.1