Polypane

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

Screenshot of the Polypane application

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.

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

Screenshot of 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. Clicking it will toggle between horizontal mode and your most recently used mode, right-click it to choose between horizontal, vertical, focus and full mode.
  • Filter. Clicking it will turn the filter on and off, and right clicking lets you 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.
  • Open devtools. Click to toggle the developer tools. In Isolate mode, this button becomes an "inspect element" button. Right click to open the Devtools extensions manager.

In Polypane, the header will always stay the same but you can choose between four different view modes to show your website. all modes (except full) display panes, which will each show your site.

Panes

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.

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 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

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

The pane header

Screenshot of 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 make full page/pane screenshots, add a reference image, add 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 different view modes that Polypane has.

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

Get Polypane

A browser that makes you awesome

Try for free
Polypane screenshot
By using our site you agree to our privacy policy and disclaimer