Layout presets for Hyper.app

This repo is currently unmaintained.

Feel free to contact me if you want to help maintain. Pull requests are welcome!

Install

$ npm install -g hyperlayout hpm-cli
$ hpm install hyperlayout

Usage

To get started, write your layout inside .hyperlayout.

If you already use a package.json file, you can add it there. (With with the hyperlayout key)

Alternatively you can define global layouts in ~/.hyperlayout.

.hyperlayout

[
[
"echo 'Hello'",
"echo 'World'"
]
]

To apply the layout, simply run hyperlayout in the same directory.

$ hyperlayout

Result

Advanced example

This example shows the capabilities of hyperlayout. It demonstrates the usage inside package.json and how to define multiple layouts.

package.json

{
"name": "my-example",
"scripts": {
"watch": "gulp watch",
"serve": "nodemon build/index",
"layout": "hyperlayout"
},
"hyperlayout": {
"default": [
[[
"npm run watch",
["npm run serve", "http://localhost:3000"]
]],
"mongod"
],
"helloworld": {
"entry": "horizontal",
"layout": [
"echo 'Hello'",
"echo 'World'"
]
}
},
"devDependencies": {
"nodemon": "latest",
"gulp": "latest",
"hyperlayout": "latest"
}
}

Since there are two layouts defined here, you have to tell hyperlayout which one you want to use.

$ hyperlayout # Layout: default

$ hyperlayout helloworld # Layout: helloworld

$ npm run layout # Layout: default

Result

Examples

Tabs

["1", "2"]

---

Horizontal Panes

[["1", "2"]]

or

{
"entry": "horizontal",
"layout": ["1", "2"]
}

---

Vertical Panes

[[["1", "2"]]]

or

{
"entry": "vertical",
"layout": ["1", "2"]
}

Define a layout

There are two different ways to define a layout:

Array

The most basic way is to create a nested array with strings (commands) inside. The hierarchy looks like this:

Tabs
|-- Horizontal Panes
|-- Vertical Panes
|-- Horizontal Panes
|-- Vertical Panes
|-- ...

This is a example for a vertical split using this method:

[
[
["echo Hello", "echo World"]
]
]

Object

A layout object should contain the following key-value pairs:

• entry: <String> – You can define at which level the layout begins. Either tab, vertical or horizontal. Default value is tab.

• layout: <Array> – A layout, as described above. The only difference is, that it respects the entry point. This can make the layout more readable.

{
"entry": "vertical",
"layout": [
"echo Hello", "echo World"
]
}

Multiple Layouts

As shown in the Advanced Example, it's possible to define multiple layouts in one project. Instead of supplying the layout directly, you define name for the layout first.

{
"default": {
"entry": "vertical",
"layout": ["echo Hello", "echo World"]
},
"otherlayout": ["echo Hyper", "echo Term"]
}

hyperlayout will look for the default layout, when there is no parameter. If there is one, it will apply the given layout.

$ hyperlayout [NAME]

Global layouts

You can define global layouts inside ~/.hyperlayout.

hyperlayout will use these layouts when there is no configuration in the current directory. It's possible to force global layouts with the following command:

$ hyperlayout global [NAME]

or

$ hyperlayout g [NAME]

Known Issues

• It isn't possible layout multiple windows at once. If you know how to approach this feature, then head over to Issue #2 and let me know!

Author

hyperlayout is written by Timo Lins.

Special thanks to Tobias Lins, for coming up with some great solutions.