Browsersync and Polypane

Browsersync is a development tool that lets you keep multiple browsers showing your URL in sync. Polypane offers that functionality natively, making it faster to use without any additional scripting or configuration. To prevent both systems from interfering with each other, Polypane will automatically turn off some of its syncing features when it detects Browsersync. However, we advice you to turn off Browsersync's ghost mode and use Polypane's native syncing features instead.

Browsersync Ghost mode

The features Polypane turns off are the ones that Browsersync calls "ghost mode". These are:

• Clicks
• Form inputs
• Scroll

Polypane detects which of these are turned on in Browsersync and will automatically turn them off in Polypane. We do this because Browsersync is slightly slower than Polypane's syncing, and so it continuously undoes the syncing Polypane did, leading to a very frustrating experience. Polypane's other syncing options like hovering and focus have no equivalent in Browsersync and will still be managed by Polypane.

We advice you however to set ghostMode: false in your Browsersync configuration. This will let you use Polypane's native syncing features, which are faster than the ones in Browsersync.

Migrating from Browsersync to Polypane.

If you're already using Browsersync, you can easily migrate to Polypane. Polypane has native support for the syncing options as well as the live reloading options.

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.

With Polypane Portal you can even sync across different browsers and even devices while keeping them all in sync with Polypane.

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

2. Using Polypane's built-in 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. If you previously used ghost mode, you might have to turn the syncing options back on for the current tab.

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?

With our Ghost mode adaption (explained at the top of the page), you can keep using Browsersync and Polypane at the same time. You can even run the Browsersync Admin UI in the Browse panel.

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 then automatically start with the right URL whenever you launch Browsersync.