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

Category: Javascript | October 12, 2018
Author: davidecaruso
Views Total: 1,454
Official Page: Go to website
Last Update: October 12, 2018
License: MIT


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.


# Yarn
$ yarn add shell.js

$ 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=""></script>
new Shell('#default', {
    typed: Typed



  • v3.1.0: Fix responsive behaviour


  • Inherit correct color for title


  • Lots of fixes


  • v3.0.0-rc.1

You Might Be Interested In:

Leave a Reply