Quick Start

The best way to get a feel for how Polypane works is to follow along with the Quick Start 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.

Another important part of the Polypane UI is the Panel. In the panel you'll find a ton of different tools like an Element panel and Console (both synced across all panes) and many different panels that give you insights into your pages: a meta info overview, different 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!

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.