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

Preview:

Description:

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:

Import the shell.js into your web project.

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

Create a placeholder element for the terminal.

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

Generate a default terminal inside the element.

new Shell('#default', {
    // options here
});

Set the styles of the terminal. Possible styles:

• ‘custom’ (default)
• ‘ubuntu’
• ‘osx’
• ‘windows’

new Shell('#default', {
    style: 'osx'
});

Set the theme (dark or light) of the terminal.

new Shell('#default', {
    theme: 'light'
});

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

new Shell('#default', {
    user: 'guest',
    host: 'CSSSCRIPT',
    path: '/etc/',
    commands: ['sudo -i', 'rm -rf /', 'exit']
});

Make the terminal full responsive.

new Shell('#default', {
    responsive: true
});

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>

new Shell('#default', {
    typed: Typed
});

Changelog:

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