Fork me on GitHub

w3term - Javascript Terminal

This terminal is intended to support the emulation of an interactive shell like many scripting languages or the operating systems themselves provide.

Note that it is now also easy to create custom styles for your terminal, see this page for more information on styling.

Usage:

For this demonstration, some example commands have been implemented (you can write your own ones using Javascript):

Type help and it will tell you that no help is availale.
Type clear and it will erase the terminal contents.
Type prompt "> " to change the prompt symbol to >
Type disable to disable text input for two seconds
Type colors to show all possible colors (ansi escaped)

Features

Text input
Paste text using CTRL+V
HOME / END jump to start / end of line
Navigation using arrow keys
Quick navigation between words using CTRL+LEFT / CTRL+RIGHT
ALT+Backspace deletes a whole word.
Browsing through command history using UP and DOWN keys
Commiting commands using RETURN
Bind a callback function which evaluates the commands and implements behavior.
Compatible with non-keyboard devices.
Sass-preprocessed stylesheets make it easy to customize the terminal layout and appearance.

Dependencies

No external dependencies / no 3rd-party libs required

Tested in:

Firefox 33.0
Chromium 37.0
Chrome 18.0
Opera 12.16
Android 4.04 Browser
Internet Explorer 11.0.14

Documentation

Usage example

In order to create a terminal, you need to include the w3term.js and w3term.css files in your HTML file. You can also use the minified versions inside the dist directory.

A terminal is created by calling the function w3term with a dom element as an argument (in this case a div). Every element that is not a div is automatically converted into a div.

var term = w3term(document.getElementById("myId"),
    {
        prompt : "$ ",
        processCommand : function(cmd) {
            // implement your command logic here
        }
    }
);

term.w3term.println("Welcome to w3term"); // print some text into the terminal

The second parameter is an object that contains several options. It is optional and can be omitted if the terminal should be created with default options. A list of possible options is described below.

Method Summary

The following methods can be called via element.w3term.<methodName>(...):


    
        
            init(node, options)

            Replaces the given node with a terminal.
            
                
                    node

                    An element that should be converted into a terminal.
                
                
                    options [optional]

                    An object that defines the behavior of the
                    terminal. Possible values are:
                    
                        
                            prompt:
                            (string) The prompt symbol
                            (default="> ")
                        
                        
                            historySize:
                            (int) The number of commands which can be stored
                            within the command history.
                            (default=100)
                        
                        
                            processCommand:
                            (function(cmd, term)) A handler function which
                            receives a command from the terminal and may
                            process them. The second parameter is optional
                            and will receive the terminal object which sent
                            the command.
                            
                                (writes the command to the JS console
                                by default)
                            
                        
                    
                
            
        
            setInput(text)

            Sets the prompt line of the given terminal to the given text.
            
                
                    text

                    The text which should be set as current line
                
            
        
        
            clear()

            Clears the contents of the given terminal.
        
        
            println(text, escapeHtml)

            Prints a line of text into the given terminal.
            
                
                    text

                    The text which should be printed
                
                
                    escapeHtml

                    (optional, default = true). If set to true,
                    all HTML tags and characters will be escaped in order to
                    avoid undesirable code injection.
                
            
        
        
            print(text, escapeHtml)

            Same as println, but does not add a newline character
            at the end of the text.
            
                
                    text

                    The text which should be printed
                
                
                    escapeHtml

                    (optional, default = true). If set to true,
                    all HTML tags and characters will be escaped in order to
                    avoid undesirable code injection.
                
            
        
        
            disableInput()

            Hides the blinking caret and disables user input.
        
        
            terminal.enableInput()

            Shows the blinking caret and enables user input.
        
        
            scrollToBottom()

            Scrolls down to the last line (i.e. the caret) of the terminal.