Quickstart Guide: Hyper JS/HTML/CSS Terminal

[golgaroth]

Getting Started with Hyper

Hyper is pretty cool in that it is a terminal emulator built entirely from html/css and javascript. Behind the scenes, Hyper uses Electron for its cross platform compatibility.

In this very brief guide, we'll get up and running with the hyper terminal along with a few plugins.

Download/Install Hyper

Install homebrew cask and then issue the command:

• brew cask install hyper

Setting up Zsh as your shell instead of Bash

1. First, verify if you are using zsh or bash
   • echo $0
2. Change the default shell for your working user:
   • chsh -s $(which zsh)
   • exit and reopen your hyper terminal
3. Edit the hyper config file and change the shell option:
   • vi ~/.hyper.js
   • shell: '/usr/local/bin/zsh'
4. Let's make sure your favorite editor is setup in your zsh runtime configuration file
   • nvim ~/.zshrc
   • There should be a line that reads: export EDITOR="/usr/local/bin/nvim"
5. If you run into issues when you try to use Hyper --> Preferences in the file menu (such as Xcode opening instead of your editor)
   • Find any file type of js and right click on it --> Get Info
   • Open With --> Other...
   • Browse to the location of your editor (or pick TextEdit) and choose it.
   • Pro Tip: some files are hidden in OSX. In finder you can press CMD + Shift + . to force hidden files/folder to be shown

Congrats! If you're still here and made it this far, you have a basic installation of the Hyper terminal emulator configured and running.

Now for a slight detour, let's beautify our terminal:

Installing Oh-My-Zsh (detour, totally skippable)

Install Oh-My-Zsh

• Follow install instructions at https://github.com/robbyrussell/oh-my-zsh
• I prefer to use the agnoster theme with the patched menlo powerline font
• Also, install powerline for zsh for max effect
• Powerline fonts can be found here: https://github.com/powerline/fonts
  • After you copy down the repo you can do sh install.sh to install all the fonts
  • You can do source ~/.zshrc for any changes you make to zsh to take effect immediately
  • If you get stuck on installing fonts, here is a good discussion: https://github.com/zeit/hyper/issues/464

Now let's add a plugin or two to make this thing look cool.

Installing Plugins for Hyper

1. First make sure you have node installed, along with npm:
   • Install nvm: https://github.com/creationix/nvm
   • nvm install node
2. Edit the hyper configuration file nvim ~/.hyperjs
   • Let's hide the annoying hyper titlebar: plugins: ['hyperminimal'],
   • To fullscreen on MacOS, you can press CTRL + ALT + F
3. Now let's get add a nice color theme to hyper:
   • Make your plugins line in the .hyperjs conf file look like so:
     • plugins: ['hyperminimal', 'hyper-snazzy'],

Congrats!

You now have a nice looking terminal that is completely written using html, js, and csss. It is very customizable.

Check out awesome hyper for more neat plugins and color schemes: https://bnb.github.io/awesome-hyper/

I hope this helped! Leave comments below if you run into any issues.