vercel / hyper

A terminal built on web technologies

For more details, head to: https://hyper.is

Project goals

The goal of the project is to create a beautiful and extensible experience for command-line interface users, built on open web standards. In the beginning, our focus will be primarily around speed, stability and the development of the correct API for extension authors.

In the future, we anticipate the community will come up with innovative additions to enhance what could be the simplest, most powerful and well-tested interface for productivity.

Usage

Download the latest release!

Linux

Arch and derivatives

Hyper is available in the AUR. Use an AUR package manager e.g. paru

paru -S hyper

NixOS

Hyper is available as Nix package, to install the app run this command:

nix-env -i hyper

macOS

Use Homebrew Cask to download the app by running these commands:

brew update
brew install --cask hyper

Windows

Use chocolatey to install the app by running the following command (package information can be found here):

choco install hyper

Note: The version available on Homebrew Cask, Chocolatey, Snapcraft or the AUR may not be the latest. Please consider downloading it from here if that's the case.

Contribute

Regardless of the platform you are working on, you will need to have Yarn installed. If you have never installed Yarn before, you can find out how at: https://yarnpkg.com/en/docs/install.

1. Install necessary packages:

• Windows
  • Be sure to run yarn global add windows-build-tools from an elevated prompt (as an administrator) to install windows-build-tools.
• macOS
  • Once you have installed Yarn, you can skip this section!
• Linux (You can see here what your Linux is based on.)
  • RPM-based
    • GraphicsMagick
    • libicns-utils
    • xz (Installed by default on some distributions.)
  • Debian-based
    • graphicsmagick
    • icnsutils
    • xz-utils

2. Fork this repository to your own GitHub account and then clone it to your local device
3. Install the dependencies: yarn
4. Build the code and watch for changes: yarn run dev
5. To run hyper

• yarn run app from another terminal tab/window/pane
• If you are using Visual Studio Code, select Launch Hyper in debugger configuration to launch a new Hyper instance with debugger attached.
• If you interrupt yarn run dev, you'll need to relaunch it each time you want to test something. Webpack will watch changes and will rebuild renderer code when needed (and only what have changed). You'll just have to relaunch electron by using yarn run app or VSCode launch task.

To make sure that your code works in the finished application, you can generate the binaries like this:

yarn run dist

After that, you will see the binary in the ./dist folder!

Known issues that can happen during development

Error building node-pty

If after building during development you get an alert dialog related to node-pty issues, make sure its build process is working correctly by running yarn run rebuild-node-pty.

If you are on macOS, this typically is related to Xcode issues (like not having agreed to the Terms of Service by running sudo xcodebuild after a fresh Xcode installation).

Error with C++ on macOS when running yarn

If you are getting compiler errors when running yarn add the environment variable export CXX=clang++

Error with codesign on macOS when running yarn run dist

If you have issues in the codesign step when running yarn run dist on macOS, you can temporarily disable code signing locally by setting export CSC_IDENTITY_AUTO_DISCOVERY=false for the current terminal session.

Related Repositories

• Website
• Sample Extension
• Sample Theme
• Awesome Hyper

hyper's Issues

Extensions API

Continuing from the "Allow custom stylesheet" thread (#10).

The way I want to do this is directly with the JS extensions API. You would basically register a plugin that registers CSS.

The sample extension we'll have is one that makes the theme light during the day and dark at night. This will show off adding CSS and also adding a bit of JS logic, so it's a good all-around example.

I'll probably use webpack in the example build step so that you can require('./something.css'). People that want to use sass can simply use a sass loader or add another step to get the .css from the .sass.

Better updates system

Goals and improvements over the ugly hack we have:

• Downloads and installs on the background, only prompts the user to restart
• Single-click restart
• Dismissable
• Green instead of red

Assets:

• Icon icon.svg.zip
• Background color: #7ED321
• Dismiss link color: #528D11

Thanks to @matiastucci for bringing this electron API to my attention.

cmd+k support

In most terminals it seems like the history goes away upon command+k. I personally find this annoying, since later I want to scroll back.

We should make it work like clear, and if people miss the "history cleaning" behavior, we can add it as a modifier (command+shift+k for example).

Split panes

Hey! I'm loving using this so far, there's only one thing missing that helps me with my workflow.

I'd love to see multiple panes in tabs. For example, you could use CMD+D for a horizontally split pane or CMD+SHIFT+D for a vertically split pane from the currently selected. I don't have any particularly good ideas on how to navigate the panes with keyboard commands. Atom uses CMD+K then CMD+[directional arrow] to navigate between split panes.

Anyway, I'd absolutely love to see this feature in hyperterm, I hope it's possible!

replace hterm-umd with hterm-umdjs

hterm-umdjs mirrors hterm's official git, whereas hterm-umd currently in use seems to be a one-time build, likely to be out-of-date.

In case you ever decide to upgrade hterm. ;)

Heuristic for error activity

When a tab becomes active, at the moment we show it in blue:

We do this by simply capturing new data to write to the terminal. What we can do: if /error/i matches the data we pass along, we can make that label red instead.

A red tab is orders of magnitude more interesting in terms of prioritization of attention than a blue tab.
There are opportunities for false positives, but I can't think of many.

Do you think this is too obtrusive and error prone for us to ship with, and therefore should be an extension?

Emoji dialog broken

this should render inline to the caret.

Traffic lights should be centered

How it looks:

How it should look:

Trying to move tabs at the edges should work

If you're on the last tab and you moveRight, it should focus the first one.
If you're on the first tab and you moveLeft, it should focus the last one.

DAE hate the scrollbar?

Should we hide it by default?

Non-retina text rendering is bad

There's a rule, presumably down in Electron, that is setting -webkit-font-smoothing: antialiased for x-screen. Perhaps I'm extra sensitive to this, but this looks absolutely terrible on non-retina screens. When I toggle that rule in the inspector everything looks great. Personally I think that also looks better on a retina screen. It might be worth considering enforcing subpixel-antialiasing (IMO always, but could be on a media query for < 2 pixel density), or eventually some setting even.

Question: possible to close a webview without closing the tab?

I can't seem to figure out the command (if there is one) for exiting a webview session without closing the corresponding tab as well. Totally acceptable if that's not supported, but might be a nice feature addition if it's not already in there!

Implement font size <Term> property

From the perspective of it'd be more elegant if we simply alter in the render loop.

Then we can capture it in shouldComponentUpdate and manually perform the transformation on the local term reference and return false.

(from #34, ping @jhaynie)

Displaying extra command on tab completion (zsh)

You cannot delete it with backspace.

Special characters and foreign keyboard not displayed correctly

So I use Spanish ISO keyboard (like this one: http://g01.a.alicdn.com/kf/HTB1iOQ8HVXXXXaeXpXXq6xXFXXXd/Spanish-Euro-Keyboard-Cover-Protector-for-MacBook-Air-11-11-6-Inch-European-ISO-Keyboard-Spain.jpg_640x640.jpg), and it is impossible to type some characters.

For example, "special" characters like ¿¡· are displayed like this: <00c2><00bf><00c2><00a1><00c2><00b7>, same with the ñ.

And other keyboard combinations are just impossible to type, my biggest issue is ~, since I need to type Alt + ñ but it just doesn't appear. Same issue with any letter with an accent (á, ö, â, etc).

I'm using zsh, if it matters.

In zsh trying to open websites results in an error

In zsh with oh-my-zsh installed trying to run google.com or apple.com from Hyperterm produces this error:

❯ google.com
zsh: command not found: google.com

When I exec bash and run google.com loading websites works perfectly. Any thoughts?

Get rid of `border-radius` in fullscreen mode (macOS)

Hopefully the fullscreen events fire in the main browser window to make this easier.

Allow custom stylesheet

Allowing a custom stylesheet offers a lot of possibilities to make hyperterm like home, for example changing the font and font-size.

It could be implemented with the simple convention of having a style.css (maybe style.less) in ~/.hyperterm/.

Hyperterm 0.2.1 cursor issue

Hi!

In the last update the cursor has an issue, it's not aligned with the input line:

Also, there is a scrollbar by default

Make fullscreen look pretty (Title bar is transparent and overlaps content on fullscreen)

Currently, the title bar looks like this:

Extend README.md

A few things we need in there:

• What is hyperterm? Why does it exist? Why is it special? (aka. "Description")
• Screenshot or GIF showing usage
• How to contribute

I also think that we should convert all "TODO" items into issues (makes them easier to manage and discuss about with the community).

Uncaught Exception: Expected 48 got 47

Exception occurs after trying to run npm run launch and produces this error.

> hyperterm@0.1.0 launch /home/proxima/Desktop/hyperterm-0.1.0
> electron index

App threw an error during load
Error: Module version mismatch. Expected 48, got 47.
    at Error (native)
    at process.module.(anonymous function) [as dlopen] (ELECTRON_ASAR.js:158:20)
    at Object.Module._extensions..node (module.js:568:18)
    at Object.module.(anonymous function) [as .node] (ELECTRON_ASAR.js:158:20)
    at Module.load (module.js:456:32)
    at tryModuleLoad (module.js:415:12)
    at Function.Module._load (module.js:407:3)
    at Module.require (module.js:466:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/proxima/Desktop/hyperterm-0.1.0/node_modules/child_pty/lib/child_pty.js:1:90)
A JavaScript error occurred in the main process
Uncaught Exception:
Error: Module version mismatch. Expected 48, got 47.
    at Error (native)
    at process.module.(anonymous function) [as dlopen] (ELECTRON_ASAR.js:158:20)
    at Object.Module._extensions..node (module.js:568:18)
    at Object.module.(anonymous function) [as .node] (ELECTRON_ASAR.js:158:20)
    at Module.load (module.js:456:32)
    at tryModuleLoad (module.js:415:12)
    at Function.Module._load (module.js:407:3)
    at Module.require (module.js:466:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/home/proxima/Desktop/hyperterm-0.1.0/node_modules/child_pty/lib/child_pty.js:1:90)

Node & npm versions
node -v5.1.0
npm -v3.8.1

OS
Arch Linux 4.6.2

Extra `%` signs appearing after commands

Shell: zsh

Here is what I see on the Terminal,

Window size badge opens website on click

IMHO, these two aren't related at all. Because of this, the badge shouldn't link to the site.

When opening a new tab, it should point to the same directory as the other tab

If you open a new tab within terminal.app, the tab will automatically point to the directory of the tab from which you've opened the new one.

It's a pretty handy feature, so I think it should also be in hyperterm!

Feature request: CMD-K to clear scrollback (or perhaps ability to remap CTRL-L)?

On Mac OS terminals, the default command to clear scrollback is command-k, which my fingers are trained to use often. Looks like the closest similar behavior is clear or CTRL-L in hyperterm (although it doesn't clear, just puts the prompt at the top, which is a completely acceptable alternative for me). Might be nice to have this functionality for users switching from mac terminal

Repeated key presses don't register in Vim

If I press and hold a navigation key in vim like h or j the repeat doesn't register like it does in Terminal/iTerm.

Option-arrow does not act like terminal.app

When modifying commands in other terminal apps (and text editors), option-arrow acts like the b and w commands in vi, jumping to the next word boundary. In hyperterm, it instead prints ;3D and makes the ^G noise.

Note that option-delete acts as expected, deleting to the nearest word boundary.

ls (without -l) shows only the first letter of the last column

On the right side of the terminal, you can see the truncated names:

Alternative shortcut for exiting website

I presumed I could exit a website with ctrl + c - similar to other terminal processes and it took a little while to figure out it was command + w. Not a big deal, but thought I'd mention :)

What is the end goal of the project?

Hi,

I'm using this already and I really like the aesthetic and of course the fact that uses web tech. Kudos for having something usable day to day so early.

I was wondering though what your vision of what hyperterm will look like is. I've been toying with the idea of a web/electron shell for a while, but my thinking for building a web tech based terminal emulator is to be able to use complex UIs, not to provide a seamless xterm experience using web technologies.

Is the end goal of the project to be "the Atom of terminals"?
Do you plan or making it extensible so rich media can be embedded, for example as a result of a command execution (showing image thumbnails on ls is the example that comes to mind)? Or is the goal to have it always be 100% compatible with current terminal emulators?

Thanks!

Babel/webpack modules missing from package.json

Trying to build locally (on Linux) I hit:

ERROR in Entry module not found: Error: Cannot resolve module 'babel-loader' in /home/daniel/dev/hyperterm/app

Installing that then asks for babel-core, installing that leads to an Unknown plugin "transform-react-jsx" error. An webpack watch entry in package.json scripts would be good in addition to more complete devDependencies.

Hyperterm should remember the window size upon restart

Currently, Hyperterm always start with a set size.

Reproduce

1. Open Hyperterm
2. Change the window size
3. Restart Hyperterm
4. See how the window still is the default size

Improve terminal process name / title extraction

Our current method is kinda flawed :\

No close button on an individual tab

It's only possible to close a tab by hitting cmd+w, which perhaps shouldn't be the only way of closing a tab.

Version: 0.2.1

(I'm filing a bunch of UI stuff now, to keep track of them. Can be triaged).

Open tab icon?

Not everyone is so keyboard oriented

thoughts?

Editor width doesn't match terminal width

• Shell: zsh
• Editing files with vim or nano

Steps to reproduce

1. Open Hyperterm
2. Make the app window a bit bigger with your mouse
3. Open a file with vim or nano
4. Long lines get wrapped before the end of the terminal window.

Colors

Terminal colors are slightly different (not respected?)
see

Hyperterm:

Terminal:

Fullscreen shortcut

Fullscreen mode would be great :)

Edit: With shortcut support

update interval

Default update interval runs every 5 seconds. this should run way less frequently.

Switching tabs with `CMD+Shift+[` `CMD+Shift+]`

This is funny, I had a conversation about switching tabs via arrows vs [] with many people, the split is right there in the middle.

I'd definitely love to see CMD+Shift+[ and CMD+Shift+] working in Hyperterm.

Fix braille rendering

tfw:

Not possible to rearrange tabs by dragging

The whole Hyperterm window is moved when dragging a tab with the mouse.

Version: 0.2.1

(I'm filing a bunch of UI stuff now, to keep track of them. Can be triaged).

Expose process API from webview

The webview should be able to execute processes and also know the ttyname.

That way, the index.js does less, we don't need to maintain subscriptions for title publishing, no blur / focus, etc. will execute the commands directly.

Command + , (settings) should edit `~/.hyperterm.json`

We can accomplish this by opening a new tab and writing:

'$EDITOR ~/.hyperterm.json\n'

to it :D
Perhaps also we can write a test for the absence of $EDITOR in the same command to warn in red letters about not having configured an editor and to try manually.

Default OS X keyboard shortcuts are not working

I use cmd+h to hide all windows belong to an app (can't remember if it's default OS X behaviour or not). It's working in other Electron apps, such as Slack and Atom, when focusing on text inputs. Not sure if this is true for other global OS X shortcuts people have set up.

Edit: I tried with cmd+option+m for minimizing the current window, which isn't working in Hyperterm.

Version: 0.2.1.

Keyboard shortcuts don't work when closing a tab with cmd+w

The problem is that we can't give programmatic focus to hterm (it seems) when keyboard events are used. It seems to require a click event, probably due to the fact that there's an <iframe> in the way.

We might need to register all the Mousetrap shortcuts as accelerators in Electron as well.

Implement font size indicator

(from #34, ping @jhaynie)

build script is missing

package.json doesn't list build in its scripts but package.sh suggests it should be there :) do you have commands for that and for a watcher or is it just browserify/etc?
EDIT: found the webpack script in app :)

Text does not wrap to second line but does on thrid

Text does not wrap when you reach the end of the window but when you expect text to be on the third line it does wrap and goes to the second line.