Polypane

Intro to Polypane

Polypane is a browser, but you should really think of it as a developer tool or a design tool first. It's not for browsing the web, it's for creating the web.

Some concepts, like the address bar and the reload button, work the same as in other browsers. Other parts work differently. This is a quick intro to working with Polypane. For a more complete overview, see our overview of the UI.

TLDR;

Polypane shows multiple viewports at once. You can add them by double clicking and you can resize them by selecting presets, using your css breakpoints or by resizing with the mouse. This lets you arrange them how you like, and display them in multiple view modes depending on your needs. There are many additional features like devtools extensions, screenshotting and live reloading which help you develop and test faster.

Getting started

Conceptually, Polypane shows you a single website in multiple viewports at the same time. In Polypane, these viewports are called panes and they're at the core of the UI. To add a new one, double click anywhere your mouse displays an "add" cursor. Your Panes can be Emulated devices, they can be based on the CSS breakpoints of your site and they can even be completely freeform (every pane is resizable by editing the width and height, or by dragging with the mouse). This lets you pick the sizes that work for you. If you've found a nice set of panes that work for you, save them in a workspace, to return to them at a later point.

Your chosen set of panes can be shown in multiple View modes. You can show many of them in a horizontal (the default) or vertical list, or you can see them one-by-one in Focus mode. The same settings will be applied to the panes, regardless of how you choose to display them.

Interactions (like scrolling, hovers and form input) are synced across all viewports. This helps with testing across viewports, and speeds up development.

Depending on if you're using isolated panes, you will have one developer tools, or each pane will have it's unique developer tools. With isolated panes, you can also emulate devices.

Switching to a new browser for development can take some getting used to. We have a few pointers on how to make the Switch to Polypane easier.

That was a short overview of how to get started with Polypane. For a more complete overview, see our overview of the UI. From this point, Polypane has a wealth of features depending on your need. Here's just a few examples:

Make sure to read through the rest of the documentation to get the most out of using Polypane. For questions, reach us via the contact form.

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