Rather than manually refreshing your browser when your patterns or CSS change, Pattern Lab auto-reloads your browser window for you using BrowserSync.

Auto-reloading is a behavior that is done in concert with file watching. You can read more about how these two features work together here.

How to Start and Connect to Pattern Lab with BrowserSync

Running ‘gulp patternlab:serve’ or ‘grunt patternlab:serve’ from the command line of your working directory will start up Pattern Lab with BrowserSync and launch http://localhost:3000 in your default browser.

How to Stop the Server

To stop watching and serving files on Mac OS X and Windows you can pressCTRL+C in the command line window where the process is running.


An auto-reload service was built into Pattern Lab 1. With Pattern Lab 2 this feature has been turned into the Auto-Reload Plugin. To install this plugin do the following:

  1. In a terminal window navigate to the root of your project
  2. Type composer require pattern-lab/plugin-reload

The Auto-Reload Plugin is automatically enabled when you install it. You can always disable the plugin if you need to.

This service is enabled when using the --watch or --server --with-watch commands. Learn more about watching for changes.