How to turn off Browsersync ghostMode in Eleventy

A list of tags for this post.

In your eleventy.js file within the module.exports section add the following…

  eleventyConfig.setBrowserSyncConfig({
ghostMode: false
});

Eleventy uses Browsersync to serve your site locally, and ghostMode is the option that enables clicking, scrolling and other actions to be mirrored across devices. For example, if you have the same page open in Firefox and Chrome and click a link in Firefox, both browsers will load the linked page. Scroll the page on your laptop and it will also scroll your phone or tablet, etc.

I’ve found this feature to be very handy but encountered a scenario where I needed to disable it. I was working on a project and fired up Sizzy to view it across browsers and devices. It had been awhile since I used Sizzy and I was greeted with this message…

An informational pop-up that reads: Browsersync can conflict with Sizzy's synchronization features. We recommend turning off Browsersync's ghost mode option if you are having troubles using Sizzy.

I didn’t even know ghostMode was an option and thought Browsersync just worked that way! After a bit of searching I found this thread about disabling it in the Eleventy Base Blog starter and took the example from there.

There are plenty of other configurable options in Browsersync. 11ty Rocks also has an example for opening a browser on launch. Happy reloading!

A list of tags for this post.

Back to top