El terminador

EL-Term is an Electron-based Terminal Emulator. Because I'm sure I'll be the only user, I've taken the liberty of dubbing it El terminador. I built it primarily because I didn't like any of the emulators I saw when I moved from using my Mac for development to Linux. None I thought were as complete as iTerm2 and even that venerable tool, with its layers of profile-setting dialogs, can be difficult to set up.

• Highlights
• Technology Stack
• How to Run in Development Mode
• How to Run in Production Mode (Linux)
• How to Run in Production Mode (Windows and Mac)
• Customization
  • Customizing Tabs
  • Customizing Splits
• Search and Highlight
• Tips

Highlights

• Arbitrary splits, both horizontal and vertical
• Multiple tabs, each with their own split arrangement
• Customizable badges visually identify sessions
• Powerline-ready, built-in Roboto Mono font
• All customizations (splits, tabs and so on) are automatically persisted
• Looks great on a 4k monitor!

Technology Stack

First of all, none of what I attempted to do would amount to anything without the support of xterm.js and node-pty. These two first-class projects fit each other hand-in-glove. In addition, I have relied heavily on one of the best tech stacks currently available:

• Electron to build a cross-platform desktop app with TypeScript, HTML and CSS.
• Angular as a framework for SPAs.
• Thorsten Hans' ngx-electron to expose Electron's API to Angular.
• The context menu is driven by the impressive ngx-contextmenu.
• Angular Material for UI components.
• Font Awesome's awesome library of icons.
• The amazing ngxs state management pattern.
• angular-split handles all the details of the arbitrary splits that El terminador supports.
• ngx-drag-drop supports file drop into a terminal session and allows tabs to be reordered.

How to Run in Development Mode

One time only, you'll need to grab the code.

git clone https://github.com/mflorence99/el-term.git
cd el-term
npm install

Next, start the dev server for the Angular client. This way, hot reload of the client is supported.

npm run serve

Finally, in another session, start the Electron app itself.

npm run test

How to Run in Production Mode (Linux)

NOTE: this currently only works for Ubuntu / Debian.

I need to host the installation files.

One time only, you'll need to grab the code.

git clone https://github.com/mflorence99/el-term.git
cd el-term
npm install

Then package and install El terminador.

npm run package
npm run deb64
npm run deb64-install

How to Run in Production Mode (Windows and Mac)

Although there are currently no installation files except for Linux, you can still start El terminador in production mode.

npm run live

Customization

I wanted to move away from the way most terminal emulators use profiles for customization. For me, the added layer of indirection is cumbersome and their huge number of customization combinations all but define the Paradox of Choice.

So in El terminador you can't pick a font, or a font size, or change background or text colors. Instead:

• You associate an icon and a color to each tab
• Both identify each split under that tab
• An individual split can be given badge text to further visually identify it

Customizing Tabs

Right click on the tab's icon.

Customizing Splits

Right-click the split to be customized and select Preferences....

Search and Highlight

Right-click the split to be searched and select Search.... The search string is remembered and text containing it will be highlighted as it is shown. This feature is very useful, for example, when a session produces stack traces. You can specify a search string that picks out your application's stack trace entries for easier visual parsing.

Tips

• The Broadcast... facility is very handy for dealing with multiple sessions at once.
• Swap with... is invaluable when rearranging a complex layout of splits.
• To reorder tabs, click and drag the tab's label to its new position.