Polypane is a browser means to develop websites with. Because of this, many parts will be familiar if you come from a different browser, like the address bar, forward and backward buttons and the reload button. Other parts of the UI might be less familiar. Read on for a high-level overview.
Polypane can be split in two parts:
- The header, with the page title and address bar, and
- The pane section, that shows your panes.
For any part of the UI, hover over it and a tooltip with additional explanations will appear.
Familiar parts of the header will be the address bar, navigational buttons and reload, and they work similar to other browsers: When typing in the address bar, Polypane will automatically suggest previously visited pages based on your input. You can type any part of the URL and it will match.
The navigational buttons will be clickable depending on if there is a forward or backward history, and right clicking will show you a list of previously visited pages.
Reload will reload the page, but if you right click it, you can access Live and Auto reloading.
In the top-right corner of the application you'll find a slider. This slider controls the global zoom of the application, letting you zoom out to see all your panes at once.
The button bar
To the right of the address bar is a series of buttons that control different parts of the UI. From left to right:
- Mode Toggle. Toggle the mode between Default and Focus mode. Right click to select Devtools mode
- Scroll Sync. Turn the scroll sync between panes on and off.
- Set Breakpoints. Clicking this button will creates panes for all breakpoins in the site CSS. Right click to find the 'simplified' breakpoints.
- Make screenshot. Makes a screenshot of all panes together.
- Open devtools. Click to toggle the developer tools. Right click to open the Devtools extensions manager.
The pane section
In pane mode (the default), you can double click anywhere between panes to add a new pane. Focus mode and Devtools mode only have one pane.
You can resize panes through the ui in all modes in three different ways:
- By dragging the right side, bottom side or bottom right corner. If you hold shift while resizing, the aspect ratio will be maintained
- By writing new values in the pane dimensions in the pane header
- By selecting a preset from the list after you click on the pane title
The pane header
The pane header manages the current pane. The top row of the header only becomes visible when you hover over it.
The top left of the pane header has a close button, and arrows to re-order panes.
The top right shows the camera icon, and hovering over that reveals two button: viewport and full page. Clicking either will generate a screenshot of the current pane.
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
- Height (can be left empty)
- Unit clicking on it switches from pixels to ems and back.
- The rotate button. Only available if there is both a width and height. Click it to rotate the device.
This was a high-level overview of the UI, you should now have a good idea of how to use Polypane. Read the other parts of the documentation to learn about Focus mode and its quick switcher, css layout debugging, workspaces and more.
Is your question not answered?
Ask via Twitter, Slack or our contact form
Build and test your sites on many devices at once.
Save time and catch bugs before your visitors do.