Getting started

The best way to get a feel for how Polypane works is to follow along with the introduction checklist you see when you first start using Polypane. That will walk you through the common actions in Polypane.

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.

You can freely add, remove and resize panes. Their size and behaviour can be based on the CSS breakpoints of your page, built-in device presets and can even be completely freeform.

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

Your panes can be shown in multiple layouts. You can see them all in the horizontal (the default) or vertical layout, or you can see them one-by-one in in the Focus layout. For a more traditional browser UI, switch to the Full layout.

You can do many different things with the panes, like overlay images and emulate media queries. For more on this, read the Intro to panes.

Alongside panes there is another important part of the Polypane UI, the Panel. In the panel you'll find a ton of different tools like an Element panel and Console (both sycned across all panes), a meta information overview, different page outlines, an accessibility tester and much more.

Switching to Polypane

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.

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.

Need help? Chat with us in the app

During the trial period click on "Onboarding support" to open a live chat with us. This is available for everyone under the "Chat with us" option in the Help menu.