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).

Using Polypane's built-in syncing features

To replace browsersyncs functionality with the native features in Polypane, you need to do the following:

Interaction syncing

Already happens automatically, so you don't need to do anything! More on synced interactions.

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.

More on live reloading.

Want to keep Browsersync?

That's also possible. 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.

You will need to disable Polypane's other syncing features manually. You can do this by right-clicking the sync button and unchecking at least the click, keypress, input and change events.

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.