11ty Live Reload Not Working? Here’s How to Fix 

You’ve just installed 11ty (Eleventy) and you’re excited. You fire up your project, make a small change… and nothing happens. No refresh. No blinking. Just—silence. If you’re wondering why 11ty Live Reload isn’t working, you’re not alone. Let’s fix that!

TL;DR

If your 11ty live reload isn’t firing, it probably comes down to one of a few simple issues: wrong directory, missing dependencies, or a misconfigured command. Check the obvious stuff first—like your folder structure and your start scripts. Then, try running 11ty in serve mode. If all else fails, you might need a 11ty plugin or a new way to watch your changes.

First, What Is Live Reload?

Live reload is like magic. Change your code, and your browser reloads automatically. No need to manually hit refresh or do the “did I save it” dance. For 11ty, this usually comes built right into the dev server. But sometimes it just… fizzles out.

Common Reasons It Breaks

Before you dive deep, let’s go over some of the usual suspects. These five reasons cause about 90% of the problems.

• You’re not using the correct start command
• The port is blocked or already in use
• Your files are outside the input directory
• Your browser doesn’t support the reload script
• You’re not running the dev server

Now, let’s fix them!

1. Are You Running the Right Command?

This one’s super easy to miss. You might be running just:

npx @11ty/eleventy

This builds the site. But it doesn’t watch. And it doesn’t reload.

Here’s what you should be running during development:

npx @11ty/eleventy --serve

Or, even better, set up a script in your package.json:

{
  "scripts": {
    "start": "eleventy --serve"
  }
}

Now, just type:

npm run start

Simple and smooth.

2. Where Are Your Files?

Check your file structure. 11ty needs to know where your input directory is. By default, that’s your project root. But if your files are somewhere else, 11ty might not be watching them.

If needed, create a config file: .eleventy.js

module.exports = {
  dir: {
    input: "src",
    output: "dist"
  }
};

Make sure the HTML, Markdown, or template files you change are inside that input folder.

Also, make sure your static assets are labeled correctly. 11ty might ignore CSS or JS changes unless they’re handled with copy or passthrough settings.

3. Is the Watcher Dead?

Sometimes, 11ty just doesn’t “see” changes. It thinks everything’s fine. But it’s not.

Try forcing it to be more aware.

npx @11ty/eleventy --serve --watch

If that doesn’t help, try adding this to your config:

module.exports = function(eleventyConfig) {
  eleventyConfig.addWatchTarget("./src/css/");
  eleventyConfig.addWatchTarget("./src/js/");
};

This tells 11ty, “Yo! Also check these folders!”

4. Browser Isn’t Getting the Signal?

Live reload works using WebSockets. That means your browser has to load a script that listens for changes. If your browser is blocking it, or if you have JavaScript turned off (why tho?), reload won’t work.

Open dev tools and look for an error that says something like “WebSocket connection refused.” If you see that, it means the server isn’t sending the reload signal.

Try a different browser. Or open an incognito window with no extensions. Some extensions block dev scripts.

5. Missing Dependencies

If you’ve added your own server setup—say with Browsersync—you might be missing key bits. Here’s a basic way to add Browsersync to 11ty’s build.

module.exports = function(eleventyConfig) {
  eleventyConfig.setBrowserSyncConfig({
    files: ['./_site/css//*.css']
  });
};

This watches your compiled CSS and reloads the browser when the file changes.

Still not working? Try reinstalling Browsersync:

npm install browser-sync --save-dev

6. Check Your Node Version

Sometimes your version of Node.js is the rogue agent. 11ty works on a wide range, but very old or very new versions can cause issues.

Make sure you’re using a recent, stable version (like Node 18 or 20).

node -v

Too old? Use nvm to update quickly:

nvm install 20

7. Using a Different Template Engine?

If you’re using something other than Nunjucks or HTML (like Pug or Liquid), make sure they’re setup correctly. 11ty won’t reload if it can’t parse your files.

In your config:

module.exports = {
  templateFormats: ["njk", "md", "html"]
};

If you’re introducing a new format, add it here. And install the right plugin too!

8. Go Nuclear: Reinstall Everything

If all else fails: uninstall, reinstall. Sometimes dependencies get weird.

rm -rf node_modules package-lock.json
npm install

That’s like turning your computer off and on again, but better.

Bonus: Use Eleventy Dev Server

In later versions of 11ty, there’s a new dev server: @11ty/eleventy-dev-server.

To use it, install it manually like this:

npm install --save-dev @11ty/eleventy-dev-server

That gives you better reload behavior, extra config options, and fewer hiccups.

Still Not Working?

Try checking the output of your terminal. Are there errors? Warnings? Unexpected logs?

You can also increase debug info:

DEBUG=* npx @11ty/eleventy --serve

This prints a ton of helpful info about what’s going on behind the scenes. You might spot the exact problem right there.

Wrap-Up

Live reload issues in 11ty can be super annoying — but almost always fixable. Most of the time, it’s a quick tweak to your config or a missing directory target. Don’t stress. Just follow the steps above and your browser will be auto-refreshing in no time.

Happy coding, and may your reloads be ever snappy!