How to turn off Browsersync ghostMode in Eleventy

Dana Byerly — Sun, 04 Jul 2021 00:00:00 +0000

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. ghostMode is the option that mirrors clicking, scrolling and other actions 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…

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!

DEV Community: Dana Byerly

How to turn off Browsersync ghostMode in Eleventy