Skip to contentSkip to footer

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, the main canvas where your panes are and the panel.

The header

Screenshot of the Polypane application

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`), or right-click the button to select the layout for the new tab.

Other buttons in the header

To the right of the address bar is a set of icons that are unique to Polypane.
Screenshot of the button bar

From left to right:

  • Change layout. Click it to choose between horizontal, vertical, focus and full mode.
  • Filter. Click it to select which device categories to show and hide. When active, the icon is filled.
  • Scroll Sync. Turn the synchronised scrolling between panes 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 the 'simplified' breakpoints, and to add them one-by-one.
  • 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.

To the right of the button bar 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 main canvas

The main canvas is where all your panes are shown. To learn more about the different layout modes, read the layout section of our documentation.

To learn more about panes and their UI, read the Intro to panes.

The Panel

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

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
Try for freeView pricing
Polypane screenshot