Intro to panes
Each pane shows your page, and your interactions are synced between panes. Each pane can have a different width, height, zoom level and various other properties.
You can resize panes in horizontal, vertical and focus layout in three different ways:
- Dragging the right side, bottom side or bottom right corner. If you hold shift while resizing, the aspect ratio is maintained.
- Focus the width or height of a pane and fill in new values. Use the arrow keys to go up or down by 10.
- Select a new device preset by clicking a pane title and clicking another preset. You can also use the arrow keys to select one.
In the focus layout you can also use the Quick switcher to switch between the panes you have in the horizontal layout or by switching between the CSS breakpoints.
The pane header
All the information about a pane is shown in the pane header and here you can manage everything you do with it.
The top left of the pane header has a close button and arrows to re-order panes. These are only visible when you hover over a pane header.
The top right shows a list of icons. Here is what they do from left to right:
- Rulers, grids, columns and row overlays
- Overlay an image
- Debug tools
- Device emulation
The bottom left of the pane header contains the title. Clicking on it to show a list of device presets. click on them, or use your arrow keys and enter to find and apply a new 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:
- Scale Double click to fit the pane to the height of the application
- Unit Clicking on it switches from `pixels` to `ems` and back.
- Rotate Click it to rotate the device.
When you click into a pane, a blue bar at the top of the pane indicates 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. To clear this, press
At the bottom left of each panel we'll automatically show counters for console messages, warnings and errors so you always know what panes are sending console messages. Click these to open the console to inspect them further.
To hide them, go to the display settings in the top right corner and toggle "Show Console Stats per Pane".
Have a question about Polypane?
Contact us any time though chat, Slack or our contact form:Contact Support
Build your next project with Polypane
- Use all features on all plans
- On Mac, Window and Linux
- 14-day free trial – no credit card needed