Why use BrowserSync?

When you’re making responsive websites, there’s a lot of tweaking and testing to do. BrowserSync makes your workflow faster by synchronising URLs, interactions and code changes across multiple devices. It’s wicked-fast and totally free.

  • Action Sync

    Your scroll, click, refresh and form actions are mirrored to browsers while you test.

  • Code Sync

    Browsers are automatically updated as you change HTML, CSS, images and other project files.

  • Build Ready

    Easily integrated with task runners. Try our Grunt plugin or write your own.

  • Browser Support

    Instantly sync between your desktop, tablet and phone. Perfect for responsive designs.

  • Back-end Independence

    Ready to use with websites running on PHP, ASP, Rails and more. Fine with static files too.

  • Runs Anywhere

    Built on Node.js to support Windows, MacOS and Linux. Setup in less than 5 minutes.

Tested with: Chrome (latest), Firefox (latest), Internet Explorer 7/8/9/10, Safari (latest), Opera (latest), Android, Blackberry, FireFox Mobile, iOS, Opera Mobile, Windows Phone.

Get started in 5 minutes

  1. 1. Install Node.js

    BrowserSync is a module for Node.js, a platform for fast network applications. There are convenient installers for MacOS, Windows and Linux.

  2. 2. Install BrowserSync

    The Node.js package manager (npm) is used to install BrowserSync from a repository. Open a terminal window and run the following command:

    npm install -g browser-sync

    You’re telling the package manager to download the BrowserSync files and install them globally so they’re available to all your projects.

  3. 3. Start BrowserSync

    A basic use is to watch all CSS files in the css directory and update connected browsers if a change occurs. Navigate your terminal window to a project and run the appropriate command:

    Static sites

    If you’re only using .html files, you’ll need to use the server mode. BrowserSync will start a mini-server and provide a URL to view your site.

    browser-sync start --server --files "css/*.css"

    Dynamic sites

    If you’re already running a local server with PHP or similar, you’ll need to use the proxy mode. BrowserSync will wrap your vhost with a proxy URL to view your site.

    browser-sync start --proxy "myproject.dev" --files "css/*.css"

Further reading

Learn command line settings to control BrowserSync.

Use our Grunt plugin or Gulp Guide to integrate with your build process.

Use the API to configure Options