hyperlayout

Layout presets for Hyper.app

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.