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

Category: Javascript | July 4, 2018
Author: davidecaruso
Views Total: 328
Official Page: Go to website
Last Update: July 4, 2018
License: MIT

Preview:

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

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:

07/04/2018

  • Inherit correct color for title

07/02/2018

  • Lots of fixes

06/13/2018

  • v3.0.0-rc.1

Leave a Reply