Polypane UI overview
Parts of Polypane will be still familiar if you come from a different browser: There's an address bar, forward and backward buttons and a reload button.
However, other parts of the UI might be less familiar. With this overview of the Polypane UI you should be able to find most of the options.
Polypane can be split into roughly three areas:
- The header, with the address bar and navigation
- The workspace, where your panes are
- The panel, where the devtools are
The header is the similar to other browsers: There's a tab bar, an address bar, back and forward buttons and a reload button.
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 do a hard reload, reload just the CSS or access Live and Auto reloading, which lets you automate reloading pages based on changes you make in your code editor.
Tabs can be re-arranged by drag and drop, you can click the `+` button to add a new tab (or use cmd/ctrl + t). Right-clicking the `+` button lets you pick a new layout for the new tab.
The buttons in the header
To the right of the address bar is a set of icons that are unique to Polypane. Different layouts can show different buttons depending on whether or not they're available for that layout.
From left to right (in horizontal and vertical layouts):
- Change layout. Click it to choose between horizontal, vertical, focus and full mode.
- Filter. Filter devices by categories. When active, the icon is solid.
- Color Picker. Pick colors from anywhere on the screen
- Scroll Sync. Toggle synchronised scrolling on and off. When off, a small `x` is visible on the icon.
- Breakpoints. Clicking this button will creates panes for all breakpoins in the site CSS. Right click to find a list of all the breakpoints, and the 'simplified' breakpoints option.
- Screenshot. Makes a overview screenshot of all panes together.
- Inspect element. Click to inspect elements in all panes. Right click to inspect with pane-specific devtools. (this setting is remembered.)
- Open devtools. Click to toggle the developer tools. Right click to open the Devtools extensions manager.
- Open Panel. Click to open the side panel, where you can find Meta information, social media previews, live CSS, handoff tools and an overview of your saved workspaces.
- Global zoom lets you zoom all your panes at once. The percentage can be clicked and manually changed as well.
- App settings contains various global options to turn on and off, like web vitals and console messages, as well as performance options.
In Full mode there is an additional "three dot" icon that you can click to toggle the pane-specific UI.
The workspace is where all your panes are shown. To learn more about the different layouts, read the layout section of our documentation.
To learn more about panes and their UI, read the Intro to panes.
The panel is where you find some of the more advanced tools that Polypane offers, like the unified console, the combined element inspector and the meta information panel.
The panel can be opened by clicking the icon in the header or by pressing Shift ctrl/cmd p and can be docked to the right or bottom of the window.
For a full overview, read the intro to panel
Is your question not answered?
Ask via Twitter, Slack or our contact form