Polypane and other tools

Polypane works really well with automatic reloading tools like Browsersync or hot module reloading and can be easily started from code editors like Atom, Whisk and VS Code.

Using Polypane with Browsersync

Polypane already syncs mouse and keyboard events, scrolling and the location so it's recommended to turn those off in Browsersync via ghostMode or via the management UI.

Polypane will show a popup warning about this once per session for every page that it detects browsersync on.

Polypane accepts a url as an argument when starting, like other browsers. This enables you to set it as your browser in Browsersync. By adding --browser 'polypane' (though depending on your operating system you might need to provide the full path), Browsersync will automatically start Polypane with the right URL. This also works with opn, webpack-dev-server and similar tools.

Code editors and IDE's

Polypane supports opening the app and new tabs with most 'open in browser' features or plugins for VS Code, Atom, Webstorm, Whisk and Hype and other code editors and IDE's. Depending on the plugin, Polypane will be automatically recognized or you can add it like any other browser.

When Polypane is not yet open, it will be launched and if it's already running, 'open in browser' will open a new tab in Polypane for you.

Tumult Hype integration

When you preview your design by clicking the 'preview' button in Hype and selecting Polypane, it will automatically open the viewports you've specified in Hype so you get the full overview with just a single click. If you click the preview button again Polypane focuses and reloads your existing tab, even if you've made changes to that tab.