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.
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.
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:
- When you're working on implementing a new design, Live reloading will automatically reload pages for you and Layout debugging can help you pinpoint layout bugs. Keep the reference design close with the reference image feature.
- If you do QA, then our reference image and pane overlay features are a great boost to your effectiveness.
- Quickly make screenshots of an entire page or all viewports combined, to keep project managers or clients up-to-date.
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
Building responsive websites is hard.
Polypane makes it easy.