Features and screenshots

The goal of this project is to combine two related but separate tools: a terminal emulator, and a rich-text console, and do it properly.

There are many terminal emulators, including quite a few written in JavaScript. However, they generally work with a rectangular grid of characters, and don’t integrate rich text (images, math, variable-width text, variable-length lines, interaction) well.

There are also various tools designed for REPL-style interaction, chat clients, etc. Examples include IPython or the the JavaScript console of a web browser. However, they don’t work as terminal emulators, or at best have limited functonality or require switching modes.

For rich text applications it seems obvious to use web technologies: DOM and JavaScript.

One goal of this project is a stand-alone terminal emulator application that techies can use as a day-to-day terminal emulator, and that also seamlessly provides support for rich text and interaction. That means an embedded web engine.

The core of the project is a JavaScript package that can be used and embedded in different modes and applications.

This OpenSource.org article provides an overview of DomTerm’s functionality. (It should be merged into the following.)

A full-featured terminal emulator, like xterm. It is mostly compatible with setting TERM=xterm-256color, as many terminal emulators do, and does very well on the vttest terminal test program. Here you see the mc (Midnight Commander) file browser running in the stand-alone DomTerm application. (Click on image to see the full-size screenshot.) Emacs (shown later) and GNU readline also work well.

A back-end can “print” images, graphics, and rich text. Here you can see evaluating and “printing” Paintable objects, which are graphical objects such as filled polygons. from the Kawa REPL.

The front page screenshot shows “printing” HTML for images and rich text. (The expressions starting with #< are XML literals, which evaluate to Element objects. “Printing” an Element inserts its HTML representation in the DomTerm output.)

The image later (with the yellow circle) shows printing SVG.

You can directly print Sixel images, which is an encoding that some DEC VT terminals supported..

The guts of the implementation is portable JavaScript (terminal.js), which can be embedded in multiple front-ends. The source includes a stand-alone terminal emulator, using the embedded JavaFX WebEngine browser. You can also use the included WebSockets server, and along with your HTML5 browser of choice. Here is Emacs displaying in a FireFox browser window.

Applications of DomTerm include:

User preferences are controlled a CSS stylesheet, which can be changed by an application.

Uses a byte-protocol to communicate with the back-end, so can run in a browser (using web sockets); be embedded in an application; or run as a standard terminal emulator application.

Optional input editing. In character mode, each character is sent to the application, like a traditional terminal. In line mode, the browser does the editing, and sends the input line to the back-end when Enter is typed. A history of previous lines is available, accessible with the Up/Down arrow keys. Automatic mode switches between character mode and line mode depending on whether the back-end is in “canonical mode”.

Smart line-wrapping: Remembers which lines were too wide (and thus were wrapped). The default style add markers to show when wrapping occurred, as seen in the nearby screenshot. Window size re-size will automatically re-do line-breaking. Copying the selection as text will only include hard newlines. Reports window resize to application. Dynamic pretty-printing (Common Lisp style) uses special commands to group logical blocks, and attempts to keep the text of a block on a single line with automatic re-flow on window re-size.

“Print” hide/show buttons, using certain escape sequences enables text folding. The nearby screenshot shows the output of ls -l being hidden.

Handles Unicode. Good CJK (Chinese, Japanese, Korean) support: double-width characters really are two columns wide. Experimental IME (Input Method Editor) support.

Maintains a clean DOM structure, and thus clean HTML export. Text selections generally give you what you expect.

TAB characters are preserved.

Move cursor using mouse, even for mouse-unaware programs. Mouse clicks are translated to arrow-key characters.

Turn URLs and mail adresses in output into links. Filename with line number (as in errors messages) are turned into links for text editors. (You have to hover over them to see them.)

You can customize how links are handled.

Optional automatic pagination.

Predictive echo (similar to mosh), which is useful for slow connections. Nicer password fields.