softmotions / wsh.js

Toolkit for building a bash-like shell in the browser, including full readline support

wsh.js

The shell is intended for implementing a simple terminal interface on a webpage.

Demo

A simple demo can be found here.

History and credit

This is a fork of josh.js to implement new features and bring up to es6/es7.

What to use wsh for and when to use it

WSH allows developers to build their own command line interface to any sites. It supports full CLI Readline in the browser like TAB completion, emacs-style line editing, killring and history with reverse search.

License

wsh.js is licensed under the Apache 2.0 License since that is what josh.js is licensed under.

Functionallity

It implements key trapping to bring GNU Readline like line editing to the browser.

Line Editing

In the below C-x refers to the Ctrl-x keystroke, while M-x refers to the Meta-x keystroke which is mapped to Alt, ⌘ and Left Windows.

Movement

C-b or Left Arrow

Move back one character

M-b or Right Arrow

Move back one word

C-f

Move forward one character

M-f

Move forward one word

C-a or Home

Move to the beginning of the line

C-e or End

Move to the end of the line

Edit/Kill

Backspace

Delete one character back

C-d or Delete

Delete character under cursor

C-k

Kill (i.e. put in kill ring) text to the end of the line

M-Backspace

Kill one word back

M-d

Kill word under cursor

C-y

Yank (i.e. pull from kill ring) the most recently killed text

M-y

Rotate to the next item in killring and yank it. Must be preceded by yank

History

C-r

Reverse search through history

C-p or Up Arrow

Previous entry in history

C-n or Down Arrow

Next entry in history

Page Up

Top of history

Page Down

Bottom of history

Misc

C-l

refresh line (clear screen in shell)

Tab

Invoke completion handler for text under cursor

Esc in reverse search

Cancel search

C-c

call onCancel handler

C-d on empty line

call onCancel handler

File System

By implementing the functions getNode and getChildNodes, this library adds path traversal, discovery and completion just like a bash shell.

History

Local storage is used to save command history that persists over page changes and reloads.