Hyper – A Beautiful Terminal Built With HTML, CSS And JavaScript

Hyper is a beautiful, modern and extensible Terminal application built on web technologies such as HTML, CSS and JavaScript. It is highly customizable and configurable Terminal, so you can easily change your Terminal appearance with different themes and also extend its functionality with plugins. Hyper terminal is an open source and cross-platform electron-based application. It works well in Linux, Mac OS and Windows operating systems.

Install Hyper Terminal In Linux

Hyper Terminal is available as .deb package for Debian-based systems and .rpm package for RHEL-based systems. It is also available in AppImage format. So you can install it on any Linux distribution. Grab the suitable installation file for your Linux distribution from the releases page. As of writing this guide, the latest version was 3.0.2.

On Debian, Ubuntu and other DEB-based systems, download and install Hyper Terminal like below:

$ wget https://github.com/vercel/hyper/releases/download/3.0.2/hyper_3.0.2_amd64.deb

$ sudo apt install gdebi

$ sudo gdebi hyper_3.0.2_amd64.deb

On RHEL, CentOS, Fedora:

$ wget https://github.com/vercel/hyper/releases/download/3.0.2/hyper-3.0.2.x86_64.rpm

$ sudo dnf localinstall hyper-3.0.2.x86_64.rpm

For Arch Linux and its variants, it is available in AUR, so install it using any AUR helper tools, for example Yay.

$ yay -S hyper

Hyper is available as Nix package too. You can install it using Nix package manager like below:

$ nix-env -i hyper

On other Linux distributions, download the AppImage file:

$ wget https://github.com/vercel/hyper/releases/download/3.0.2/hyper-3.0.2-x86_64.AppImage

Go to the download location and make it executable:

$ chmod +x hyper-3.0.2-x86_64.AppImage

Finally, launch it using command:

$ ./hyper-3.0.2-x86_64.AppImage

If you have installed it using the package manager as shown above, launch it from Dash or Menu.

Launch Hyper Terminal

Here is how Hyper Terminal looks like in my Ubuntu 20.04 LTS desktop:

Hyper Terminal

As you can see, the default look of Hyper terminal is simple and clean. Good thing is we can customize and change the default look to something colorful and eye-candy!

Hyper Terminal Usage

There is a hamburger menu (three horizontal bars) on the top left corner of Hyper terminal. Upon clicking on this, you will see a few menu items such as File, Edit, View, Plugins, Window, Help. Each menu contains one or more sub-menu that allows you to perform different operations with a mouse click.

Hyper terminal menu

You can also do most of the operations from right click context menu as well.

Right click context menu in Hyper terminal

Open new tabs / windows

To open a new tab in the current terminal window, press CTRL+SHIFT+T. You can switch between tabs by pressing CTRL+1, CTRL+2 .... CTRL+9.

Open new tabs in hyper terminal

To open a new terminal window, press CTRL+SHIFT+N. You can do this from right click context menu.

Split terminal

Furthermore, you can split your Terminal window either horizontally or vertically or both at the same time. To do so, simply right click on the terminal and choose "Split Horizontally" or "Split Vertically". It comes in handy when you want to run multiple tasks/commands simultaneously.

Split Hyper Terminal

Configure Hyper terminal

The look and feel of Hyper terminal can be changed by editing its global configuration file ~/.hyper.js. As you already have guessed, the config file is in JSON format.

To open hyper terminal configuration file, right click on the hyper terminal and click "Preferences" option. The config file will open in your default text editor.

Hyper terminal configuration file

In this configuration file, you can define various parameters or properties such as;

• font size, font family, font weight,
• line height,
• letter spacing,
• cursor color, cursor shape, cursor blink,
• terminal foreground/background colors,
• show/hide hamburger menu,
• add custom CSS,
• install plugins and themes,
• enable/disable copy on selection,
• enable/disable terminal bell sound,
• and a few more.

For instance, to change the font size, the following line should be modified in the .hyper.js file like below:

fontSize: 16,

Replace "16" with your desired font size. Save and close the file.

Change font size in hyper terminal

As soon as you saved the changes, the font size will be automatically updated. Have a look at the following screenshots:

Default font size:

Hyper terminal default font size

This is how letters appears in my Terminal after changing the font size:

Font size in hyper terminal

To change font family, find and modify the following line with your desired font family:

fontFamily: 'Menlo, "DejaVu Sans Mono", Consolas, "Lucida Console", monospace',

The first font will be used by default. If the first font is not available, the subsequent fonts will be used.

Another notable property is "copyOnSelect:, which allows you to copy the test upon selection. By default, this feature is disabled. To enable it, find the following line and set its value as "true".

copyOnSelect: true,

Don't forget to save the changes.

Similarly, we can customize other parameters as per our liking. All options are self-explanatory, so it is not that difficult to configure hyper terminal.

Install plugins and themes for Hyper Terminal

Hyper terminal has a lot of cool plugins and themes to enhance the functionality and look of your terminal.

To install plugins, right click anywhere on the Hyper terminal window and choose "Preferences". Now the ~/.hyper.js file will load in your default editor.

Find the line that starts with "plugins []" property and add the plugins on by one that you want to install like below:

plugins: [
    "hyper-snazzy",
    "hyper-systray",
    "hyper-opacity",
    "hyper-tab-icons",
    "hyperborder"
    ],

Install plugins in Hyper terminal

Save the changes. The plugins will be automatically installed and enabled.

To view the changes, you should reload the Hyper terminal. To do so, click the hamburger menu -> View -> Full reload.

Here is how Hyper terminal looks like after installing the above plugins:

Change Hyper Terminal Theme

Beautiful, isn't it? There are many more useful plugins available here.

Installing themes is same as above. Just add the theme name in "Plugins []" property. For example, I am gong to add "Star Wars" theme. To do so, I added the following under "Plugins" property:

plugins: [
    "hyper-snazzy",
    "hyper-systray",
    "hyper-opacity",
    "hyper-tab-icons",
    "hyperborder",
    "hyper-star-wars"
  ],

Click save button and reload the terminal to view the changes.

Here is Star Wars theme in action:

Star wars theme in Hyper Terminal

You can find the list of available themes here.

To remove a theme or plugin, just remove the corresponding line from the ~/.hyper.js file. Save the changes and the plugin/theme will automatically be removed.

Manage themes and plugins using Hyper plugin manager

Instead of messing with ~/.hyper.js file, you can use "hyper" plugin manager to install, list, search and remove plugins and themes for your Hyper terminal.

For example, to install "hyper-clean" theme, simply run the following command:

$ hyper install hyper-clean

Or, shortly:

$ hyper i hyper-clean

Install themes and plugins using Hyper plugin manager

This command will automatically add an entry in ~/.hyper.js file and enable the theme or plugin immediately.

To list the installed plugins and themes, run:

$ hyper list

Or,

$ hyper ls

Sample output:

hyper-snazzy
hyper-systray
hyper-opacity
hyper-tab-icons
hyperborder
hyper-material-theme

To search for themes and plugins, do:

$ hyper search

Search themes and plugins for hyper terminal

To remove a theme or plugin, for example hyper-material-theme, run:

$ hyper u hyper-material-theme

Or,

$ hyper uninstall hyper-material-theme

Or,

$ hyper rm hyper-material-theme

Or,

$ hyper remove hyper-material-theme

For getting help, run:

$ hyper --help

  Usage: hyper [options] [command]
  
  Commands:
  
    <default>                    Launch Hyper
    d, docs, h, home             Open the npm page of a plugin
    help                         Display help
    i, install                   Install a plugin
    ls, list                     List installed plugins
    lsr, list-remote, ls-remote  List plugins available on npm
    s, search                    Search for plugins on npm
    u, uninstall, rm, remove     Uninstall a plugin
    version                      Show the version of hyper
  
  Options:
  
    -h, --help     Output usage information
    -v, --verbose  Verbose mode (disabled by default)

For more details about Hyper terminal, check the projects website and github page. Also check the "Awesome-hyper" github repository for delightful Hyper plugins, themes, and resources.

There are many more features which I don't aware yet. I will learn more about Hyper terminal and update this guide accordingly.

I am using Deepin Terminal now. After using Hyper terminal for a last few days, I quite like it. I guess I will stick with it for a while.

Have you tried it already? Put your thoughts on this in the comment section below.

Resources:

• Hyper Terminal GitHub Repository
• Hyper Terminal Website

Related read:

• Terminus - A Web Technology Based Modern Terminal