Intro to panes

In Polypane, each viewport is referred to as a pane. In horizontal and vertical view mode you can have as many of them as you need. In focus mode, you get a single pane in the center of your view. A pane consists of two parts: the viewport, where the page is shown, and the pane header, where you can set various properties of the pane.

The pane header

The pane header manages everything you do with a pane, though some features are hidden until you hover over them.

The top left of the pane header has a close button, and arrows to re-order panes

The top right shows a list of icons, respectively, they let you make full page/pane screenshots, add a reference image, add an overlay.

In isolate pane mode you get two additional buttons: to control device emulation and to open the pane-specific devtools.

The bottom left of the pane header contains the title. Clicking on it reveals the Device presets. You can click on them, or use your arrow keys + enter to find one. You can also give your panes a custom name.

Finally, the bottom right contains the size attributes of the pane. From left to right:

• Zoom Double click to fit the pane to the height of the application
• Width
• Height (can be left empty)
• Unit clicking on it switches from pixels to ems and back.
• Rotate. Only available if there is both a width and height. Click it to rotate the device.

Adding and removing panes

Removing and adding panes is easy in Polypane and can be done directly in the interface. To add a pane, you can either double click anywhere between panes to add a pane there, or press ctrl/cmd n or ctrl/cmd t to add one on the beginning of the list.

To delete a pane, hover over its title and a small x will appear in the top left corner of a pane. Click it to delete the pane.

If you want to stress-test your website, press shift ctrl/cmd n or shift ctrl/cmd t to add a new pane with a random width and height.

Changing the order of panes

You can change the order of panes by using the arrows in the header of each pane. Hover over the header to show them. Clicking an arrow switches the pane with the one next to it. If you have shift pressed while clicking, you switch with the first or last pane.

Active pane

When you click into a pane, a subtle blue glow appears around the pane indicating that it is active. When a pane is active, keyboard input (like space and arrow keys) are sent to the pane rather than to the browser.

Filtering panes

You can filter panes by type using the "filter" icon in the header.