Replacing the tty.js frontend with xterm.js

Tty.js is a web based terminal emulator, both server and client side included. The frontend is provided by term.js, which is quite dated. There was not any major development since 2013, and a few days ago the “no longer maintained” label was put on it. For me the biggest disadvantage of it is that it does not support the Hungarian keyboard layout, the special characters need be to inserted with ASCII codes. However the frontend is easily replacable with the newer xterm.js.
There is nothing wrong with the server side of tty.js, we can install it as it is:

npm install tty.js

It can be quickly setup thanks to the instructions on the Github page, the frontend part gets served from the static folder. For replacing the frontend we should replace the index.html there. For simplicity we should clone the whole xterm.js inside this static folder:

The main.js file which comes with the xterm.js demo is pretty useless, it only misguides the developers how it handles the enter and the other key presses. Contrary to that there is a good example on the term.js Github page and fortunately xterm.js is backwards compatible. So much code is enough for a basic main.js:

With the above modifications we can get a pretty good web based terminal, which however will have its own bugs. Resizing is not handled and the long prompts are line wrapping. When we use a custom webfont, then it can be quite pretty.

Gábor Udvari, “Udi”, web-developer and free software volunteer. I develop with Flash and PHP since 2005, I use Drupal and WordPress since 2008, I am gathering Linux administration experience since 2008. Occasionally I take English and German translation and graphics and design tasks.