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.
Find more information on the Tumult Hype blog: Hype and Polypane
General SPA support
Polypane supports the history api so it works great out of the box with SPA routers that work without full page reloads.
Is your question not answered?
Ask via Twitter, Slack or our contact form