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 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.
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:
- Change layout. Click it to choose between horizontal, vertical, focus and full mode.
- Filter. Click it to 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.
- Inspect element. Click to inspect elements in all panes. In Isolate mode, Right click to inspect with pane-specific devtools.
- Open devtools. Click to toggle the developer tools. In Isolate mode this is disabled. Right click to open the Devtools extensions manager.
- Open Panel. Click to open the side panel, where you can find Meta information, social media previews, live CSS, handoff tools and an overview of your saved workspaces.
To the right of the button bar 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.
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. Full mode is just like a regular browser.
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 typing 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
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 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
- 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.
Ready to go!
This should get you going with using Polypane. The next step is to get to know the layouts that Polypane has.
Is your question not answered?
Ask via Twitter, Slack or our contact form