Skip to contentSkip to footer

Migrate from Browsersync to Polypane

Browsersync is a development tool that lets you keep multiple browsers showing your URL in sync. Polypane offers that natively, making it faster to use without any additional scripting or configuration. Learn how to migrate from Browsersync to Polypane.

Advantages of Polypane over Browsersync

Everything you do in Polypane in synced between the panes, similar to how Browsersync syncs clicks, navigation and form input through the ghostMode setting. In Polypane however, we also sync the hover state of elements. You're really interacting with all panes at the same time.

Like Browsersync, Polypane's Live reloading can automatically detect changes to your files and reload the site for you. When Polypane detects changes in the CSS or to images, we automatically inject them without reloading the page.

Turn off Browsersync

If you run Browsersync with a separate command or as part of a combined command, comment it out. Then make sure you don't use the proxied URL in Polypane (likely localhost:3000) but the actual dev server (ports differ per implementation).

Turning on the syncing features in Polypane

Interaction syncing

Already happens automatically, so you don't need to do anything!

live reloading

Right-click the reload button and select "live reload". From here you can select your projects folder and click "start watching"

Polypane's live reloading automatically ignores common caching and configuration folders, so you won't have to write and maintain complex configurations.

If you have a build process (for example, when using SASS) you can add an optional delay to make sure the new CSS has been fully written to disk.

Polypane then shows a little lightning bolt ( ) next to the reload button and in the tab so you know it's active. Any time you switch to that tab, or restart Polypane, live reloading will also activate again.

Want to keep Browsersync?

That's no problem. You can even run the Browsersync Admin UI in the Browse panel.

When Polypane detects Browsersync with ghostMode turned on, we automatically disable scroll syncing. We do this because Browsersync is slightly slower than Polypane's scroll syncing, and so it continuously undoes the scroll syncing Polypane did, leading to a very frustrating experience.

To launch Polypane when you start Browsersync, add --browser 'polypane' to your CLI command. (Depending on your operating system you might need to provide the full path). Polypane will automatically start with the right URL when you launch Browsersync.

Is your question not answered?
Ask via Twitter, Slack or our contact form

Build your next project with Polypane

  • Use all features on all plans
  • On Mac, Window and Linux
  • 14-day free trial – no credit card needed
Try for freeView pricing
Polypane screenshot