Best Packages and Themes for Hyper: The Terminal Built on Web Technologies

Introduction

Hyper is a terminal built on web technologies, based on JavaScript, HTML, and CSS providing a beautiful and extensible experience for command-line interface users. Hyper achieves a lot of its speed and functionality thanks to the power of hterm underneath, the terminal emulator of the Chromium project.

If you’re just getting started with Hyper terminal I’d suggest you definitely head to Hyper website, they have an extensive installation guide and usage documentation

Today we’ll be looking at the best packages and themes to make our Hyper terminal much cooler.

Prerequisites

Note

1. Important words are highlighted.
2. Bold words emphasize a point.
3. Previous / Next code appears like this ....
4. Each heading contains a link to the package/theme repository.

This project requires Node.js v6.11.0 LTS or higher and Hyper installed. Now that you have completed the prerequisites, let’s get started!

Installing Packages And Themes

Hyper primary focus has been around speed, stability, and the development of API for extension authors. Extensions are available on npm and you can search hyper using the npm search command.

npm search hyper

Then edit ~/.hyper.js and add it to plugins

module.exports = {
    // ...
    plugins: [
        "hyper-ayu",
        "<other-plugins-here>"
    ]
};

Fully reload Hyper COMMAND+SHIFT+R and Hyper will show a notification when your modules are installed to ~/.hyper_plugins.

Themes

Material Theme for Hyper

config: {
    MaterialTheme: {
        theme: 'Palenight',
        backgroundOpacity: '0.4',
        accentColor: '#64FFDA', vibrancy: 'dark'
    }
},
plugins: [
    "hyper-material-theme"
]

Hyper Snazzy

// ...
plugins: [
    "hyper-snazzy"
]

Hyper Materialshell

// ...
plugins: [
    "hyper-materialshell"
]

Hyperterm Monokai

// ...
plugins: [
    "hyperterm-monokai"
]

Verminal

// ...
plugins: [
    "verminal"
]

Solarized Dark theme for Hyper

// ...
plugins: [
    "hyper-solarized-dark"
]

Dracula for Hyper

// ...
plugins: [
    "hyper-dracula"
]

Hyper Pokemon

config: {
    pokemon: 'gengar', // Define your favorite pokemon theme
    pokecursor: 'true', // Activate your theme's pokecursor
    pokemonSyntax: 'dark', // Define the color of the terminal tabs
    unibody: 'true', // Define the color of the Hyper window header
    poketab: 'false', // Deactivate your theme's poketab
},
plugins: [
    "hyper-pokemon"
]

Packages

Git Rocket

A fun plugin that shows a red rocket ship launching from the right-bottom corner of your terminal whenever you push code to GitHub.

// ...
plugins: [
    "gitrocket"
]

Hyper Power

This plugin turns your Hyper terminal on power mode, blasting sparks as you type away.

// ...
plugins: [
    "hyperpower"
]

Hyperline

A status line plugin that shows useful system information such as free memory, total memory, battery level, system uptime, CPU usage, hostname, and network upload/download speed.

// ...
plugins: [
    "hyperline"
]

Hyper CWD

This plugin allows opening new tabs with the same current working directory as the current tab.

// ...
plugins: [
    "hypercwd"
]

Hyperterm Summon

This plugin opens your terminal window using a system-wide configurable hotkey. It’s especially useful on macOS to toggle between previously active application and your Hyper application.

// ...
plugins: [
    "hyperterm-summon"
]

Hyper Statusline

This statusline plugin shows clickable and useful information when working with a Git-enabled project.

// ...
plugins: [
    "hyper-statusline"
]

Hyper Spotify

My favorite, if you use Spotify this plugin displays currently playing song and a play/pause at the bottom of the terminal but the position of this bar can be configured.

// ...
plugins: [
    "hyper-spotify"
]

Hyper Pane

This plugin enhances your terminal with pane navigation, just like you’d find with VIM. It supports navigating panes with arrow keys, jumping to a specific pane using digits, and temporarily maximizing a pane.

// ...
plugins: [
    "hyper-pane"
]

Hyper Tabs Enhanced

This plugin enhances your Hyper terminal tab, showing tab icons, colors, and activity indicator.

// ...
plugins: [
    "hyper-tabs-enhanced"
]

Hyper Transparent

This plugin allows setting Hyper terminal window transparency, background color, and on macOS a dropdown menu for setting vibrancy and transparency.

// ...
plugins: [
    "hyper-transparent"
]

Hyperterm Tabs

Tabs reordering makes grouping similar tabs possible, this plugin enables that feature and provides configurable keyboard shortcuts.

// ...
plugins: [
    "hyperterm-tabs"
]

Conclusion

I have been getting more familiar with not only Hyper, but packages and themes built for Hyper, I hope you feel this way too. Any combination of theme and package can be used so keep combining or switch every week!

What are your favorite themes, packages, or theme and package? I’m looking forward to your comments, questions, or thoughts in the comments below. I would love to see them.

And oh yeah, have fun!