Polypane UI overview

Polypane is a browser to create and test websites. Parts of Polypane will be still familiar if you come from a different browser: Polypane has 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. For more in-depth information, go to one of the pages in the menu.

For any part of the UI, hover over it and a tooltip with more explanation will appear.

The Header

The header is where you control the majority of the settings for your Polypane configuration. You can navigate to different URLs (we'll automatically suggest previously visited pages) and reload them.

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, which lets you automate reloading pages based on changes you make in your code editor.

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:

  • 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.
  • 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.
  • Inspect element. Click to inspect elements in all panes. In Isolate mode, Right click to inspect with pane-specific devtools.
  • Open devtools. Click to toggle the developer tools. In Isolate mode this is disabled. 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.


Each pane shows your site in a configurable width and height, along with various other options.

In horizontal and vertical mode, you can add as much panes as you like, and filter them should you want to. In focus mode, you get a single pane in the center of your view. Full mode is just like a regular browser.

Resizing panes

You can resize panes in horizontal, vertical and focus mode 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 typing new values in the pane dimensions in the pane header
  • By selecting a preset from the list after you click on the pane title

Additionally, focus mode shows you a quick switcher that lets you change between panes and breakpoints

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 add rulers, grids, columns and row overlays, make full page/viewport screenshots, overlay a reference image and show an overlay.

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.

How to enable device emulation

Device emulation is part of the new Isolate Panes beta feature. You can enable it in the Edit menu.

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

Ready to go!

This should get you going with using Polypane. The next step is to get to know the layouts that Polypane has.

Is your question not answered?
Ask via Twitter, Slack or our contact form

Start a Polypane trial

Improve your web dev workflow

Start free trialView pricing