Hyper

Terminal Emulators•

•JavaScript

Electron-based modern terminal with extensive plugin ecosystem.

Official Website

Features

Plugin SystemThemesSplit PanesWeb Technologies

Installation

Homebrew

brew install --cask hyper

Chocolatey

choco install hyper

Scoop

scoop install hyper

Why Use Hyper?

Hyper is an Electron-based terminal emulator developed by Vercel. Built with web technologies (HTML, CSS, JavaScript), it is familiar to frontend developers and easy to customize. It features a rich plugin ecosystem and beautiful default UI.

Extensible with Web Technologies

Create plugins and themes with just HTML, CSS, and JavaScript knowledge. Advanced customization using React components is also possible.

Rich Plugin Ecosystem

Easily install hundreds of plugins via npm. Various extensions available including themes, status lines, Git integration, and more.

Modern UI

Beautiful default design with smooth animations. Provides tabs and pane splitting with a modern UI.

Cross-Platform

Consistent experience across macOS, Linux, and Windows. Configuration files work across all platforms.

Main Features

Tabs & Pane Splitting

Open multiple tabs to organize your work. Split panes horizontally or vertically to display multiple terminals simultaneously.

Plugin System

Distribute and install plugins as npm packages. Plugins are automatically installed by simply adding the plugin name to the configuration file.

Hotkeys & Search

Customizable keyboard shortcuts, in-terminal search, and automatic URL detection with clickable links.

Hot Reload Configuration

Changes are automatically reflected when you save the configuration file. Adjust appearance and keybindings without restarting.

Installation

macOS

Homebrew

# Install via Homebrew
brew install --cask hyper

# Or download .dmg from official website
# https://hyper.is/#installation

Linux

# Debian/Ubuntu (.deb)
wget -O hyper.deb https://releases.hyper.is/download/deb
sudo dpkg -i hyper.deb
sudo apt-get install -f

# Fedora/RHEL (.rpm)
wget -O hyper.rpm https://releases.hyper.is/download/rpm
sudo rpm -i hyper.rpm

# Arch Linux (AUR)
yay -S hyper

# AppImage (all distributions)
wget https://releases.hyper.is/download/AppImage
chmod +x Hyper-*.AppImage
./Hyper-*.AppImage

Windows

# Install via Scoop
scoop install hyper

# Install via Chocolatey
choco install hyper

# Install via winget
winget install Hyper.Hyper

# Or download .exe installer from official website
# https://hyper.is/#installation

Configuration Files

Place configuration files at the following paths (JavaScript format):

~/.hyper.js (Linux/macOS)
%USERPROFILE%\.hyper.js (Windows)

Basic Configuration Example

.hyper.js

// ~/.hyper.js
module.exports = {
  config: {
    // Update channel: "stable" | "canary"
    updateChannel: 'stable',

    // Font settings
    fontSize: 14,
    fontFamily: '"JetBrains Mono", "Fira Code", Menlo, monospace',
    fontWeight: 'normal',
    fontWeightBold: 'bold',

    // Line height (multiplier of font size)
    lineHeight: 1.2,

    // Letter spacing
    letterSpacing: 0,

    // Cursor settings
    // Cursor shape: "BEAM" | "UNDERLINE" | "BLOCK"
    cursorShape: 'BLOCK',
    cursorBlink: true,
    cursorColor: 'rgba(248,28,229,0.8)',

    // Color settings
    foregroundColor: '#fff',
    backgroundColor: '#000',
    selectionColor: 'rgba(248,28,229,0.3)',
    borderColor: '#333',

    // Color palette (ANSI 16 colors)
    colors: {
      black: '#000000',
      red: '#C51E14',
      green: '#1DC121',
      yellow: '#C7C329',
      blue: '#0A2FC4',
      magenta: '#C839C5',
      cyan: '#20C5C6',
      white: '#C7C7C7',
      lightBlack: '#686868',
      lightRed: '#FD6F6B',
      lightGreen: '#67F86F',
      lightYellow: '#FFFA72',
      lightBlue: '#6A76FB',
      lightMagenta: '#FD7CFC',
      lightCyan: '#68FDFE',
      lightWhite: '#FFFFFF',
      limeGreen: '#32CD32',
      lightCoral: '#F08080',
    },

    // Shell settings
    // For macOS/Linux
    shell: '/bin/zsh',
    shellArgs: ['--login'],

    // For Windows (PowerShell)
    // shell: 'C:\\Windows\\System32\\WindowsPowerShell\\v1.0\\powershell.exe',
    // shellArgs: [],

    // For Windows (WSL)
    // shell: 'C:\\Windows\\System32\\wsl.exe',
    // shellArgs: [],

    // Environment variables
    env: {
      TERM: 'xterm-256color',
    },

    // Disable bell
    bell: false,

    // Deselect on copy
    copyOnSelect: false,

    // Default columns/rows
    // cols: 80,
    // rows: 24,

    // Padding
    padding: '12px 14px',

    // CSS (additional styles)
    css: '',

    // Terminal CSS
    termCSS: '',

    // Window opacity
    // opacity: 1,

    // macOS specific settings
    // Window button display
    showHamburgerMenu: '',
    showWindowControls: '',

    // Keys for plugin settings
    // hyperBorder: {
    //   borderColors: ['#fc1da7', '#fba506'],
    // },
  },

  // Plugin list
  plugins: [
    // Themes
    // 'hyper-one-dark',
    // 'hyper-dracula',

    // Extensions
    // 'hyper-search',
    // 'hyper-pane',
    // 'hypercwd',
  ],

  // Local plugins (for development)
  localPlugins: [],

  // Keymap settings
  keymaps: {
    // 'window:devtools': 'cmd+alt+o',
  },
};

Color Scheme Example (Dracula)

.hyper.js

// Dracula color scheme
config: {
  // ...other settings

  foregroundColor: '#F8F8F2',
  backgroundColor: '#282A36',
  selectionColor: 'rgba(68, 71, 90, 0.5)',
  borderColor: '#44475A',
  cursorColor: '#F8F8F2',
  cursorAccentColor: '#282A36',

  colors: {
    black: '#21222C',
    red: '#FF5555',
    green: '#50FA7B',
    yellow: '#F1FA8C',
    blue: '#BD93F9',
    magenta: '#FF79C6',
    cyan: '#8BE9FD',
    white: '#F8F8F2',
    lightBlack: '#6272A4',
    lightRed: '#FF6E6E',
    lightGreen: '#69FF94',
    lightYellow: '#FFFFA5',
    lightBlue: '#D6ACFF',
    lightMagenta: '#FF92DF',
    lightCyan: '#A4FFFF',
    lightWhite: '#FFFFFF',
  },
}

Custom CSS Example

.hyper.js

config: {
  // ...other settings

  // Window-wide styles
  css: `
    /* Tab bar style */
    .tabs_nav {
      background-color: #1e1e1e;
    }

    /* Active tab */
    .tab_tab.tab_active {
      background-color: #282a36;
      border-bottom: 2px solid #bd93f9;
    }

    /* Tab text */
    .tab_text {
      color: #f8f8f2;
    }

    /* Pane divider */
    .splitpane_divider {
      background-color: #44475a !important;
    }
  `,

  // Terminal styles
  termCSS: `
    /* Link color */
    a {
      color: #8be9fd;
    }

    /* Selected text */
    ::selection {
      background: rgba(68, 71, 90, 0.5);
    }

    /* Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-thumb {
      background: #44475a;
      border-radius: 4px;
    }
  `,
}

Keyboard Shortcuts

Default keyboard shortcuts list (for macOS). On Windows, substitute Cmd with Ctrl:

Basic Operations

Operation	Keys (macOS)	Keys (Windows/Linux)
Copy	Cmd + C	Ctrl + Shift + C
Paste	Cmd + V	Ctrl + Shift + V
Search	Cmd + F	Ctrl + Shift + F
Clear	Cmd + K	Ctrl + Shift + K
Increase Font Size	Cmd + =	Ctrl + =
Decrease Font Size	Cmd + -	Ctrl + -
Open Config File	Cmd + ,	Ctrl + ,
Developer Tools	Cmd + Alt + I	Ctrl + Shift + I

Tab Operations

Operation	Keys (macOS)	Keys (Windows/Linux)
New Tab	Cmd + T	Ctrl + Shift + T
Close Tab	Cmd + W	Ctrl + Shift + W
Next Tab	Cmd + Shift + ]	Ctrl + Tab
Previous Tab	Cmd + Shift + [	Ctrl + Shift + Tab
Go to Tab N	Cmd + 1-9	Ctrl + 1-9

Pane Operations

Operation	Keys (macOS)	Keys (Windows/Linux)
Split Vertically	Cmd + D	Ctrl + Shift + D
Split Horizontally	Cmd + Shift + D	Ctrl + Shift + E
Close Pane	Cmd + W	Ctrl + Shift + W
Next Pane	Cmd + ]	Ctrl + Alt + Right
Previous Pane	Cmd + [	Ctrl + Alt + Left

Recommended Plugins

Plugins are installed by simply adding them to the plugins array in .hyper.js.

Themes

hyper-one-darkAtom One Dark Theme

hyper-draculaDracula Theme

hyper-material-themeMaterial Design Theme

hyper-snazzySnazzy Theme

nord-hyperNord Theme

Extensions

hyper-searchEnhanced Search

Search text within the terminal

hypercwdCurrent Directory

Open new tabs/panes in the same directory

hyper-paneEnhanced Pane Operations

Navigate between panes with arrow keys

hyper-tabs-enhancedEnhanced Tabs

Display icons and working directory on tabs

hyperlinksLink Function

Make URLs clickable

hyper-opacityOpacity Settings

Adjust window transparency

Visual

hyper-borderBorder Decoration

Add gradient borders

hyper-statuslineStatus Line

Status bar displaying Git info and directory

hyperpowerParticle Effects

Particle effects when typing (fun addon)

.hyper.js (Plugin Configuration Example)

// Recommended plugin configuration
plugins: [
  // Themes
  'hyper-one-dark',

  // Extensions
  'hyper-search',
  'hypercwd',
  'hyper-pane',
  'hyperlinks',

  // Visual
  'hyper-statusline',
],

Tips

Plugin Development

Hyper plugins are standard npm packages. You can extend the UI using React components. See the official documentationPlugin APIfor reference.

Configuration Debugging

Open Developer Tools withCmd + Alt + I (macOS) orCtrl + Shift + I (Windows/Linux). Useful for debugging configuration errors and plugin issues.

WSL Integration

When using WSL on Windows, simply set the shell to the WSL path for easy integration. Use distributions like Ubuntu or Debian seamlessly.

Performance Notes

Since Hyper is Electron-based, it uses more memory compared to native terminals. For high-volume log output, consider GPU-based terminals like Alacritty or Kitty.

Syncing Configuration Files

Manage .hyper.js in a dotfiles repository to sync settings across multiple machines. Symbolic links are recommended.

Canary Channel

To try the latest features, set updateChannel: 'canary'to use the development version. However, stability is not guaranteed.

WezTerm - GPU-Accelerated Terminal

GPU-accelerated cross-platform terminal with Lua configuration

tools8 min read

iTerm2 - macOS Terminal Emulator

Feature-rich terminal emulator for macOS

tools8 min read

Windows Terminal - Microsoft Terminal

Modern terminal for Windows with tabs and customization

tools7 min read

Explore More

Browse Terminal Emulators

See all tools in this category

All CLI Tools

Explore all tool categories

Features

Installation

Why Use Hyper?

Extensible with Web Technologies

Rich Plugin Ecosystem

Modern UI

Cross-Platform

Main Features

Tabs & Pane Splitting

Plugin System

Hotkeys & Search

Hot Reload Configuration

Installation

macOS

Linux

Windows

Configuration Files

Basic Configuration Example

Color Scheme Example (Dracula)

Custom CSS Example

Keyboard Shortcuts

Basic Operations

Tab Operations

Pane Operations

Recommended Plugins

Themes

Extensions

Visual

Tips

Plugin Development

Configuration Debugging

WSL Integration

Performance Notes

Syncing Configuration Files

Canary Channel

Related Articles

WezTerm - GPU-Accelerated Terminal

iTerm2 - macOS Terminal Emulator

Windows Terminal - Microsoft Terminal

Explore More