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.
Your scroll, click, refresh and form actions are mirrored to browsers while you test.
Browsers are automatically updated as you change HTML, CSS, images and other project files.
Easily integrated with task runners. Try our Grunt plugin or write your own.
Instantly sync between your desktop, tablet and phone. Perfect for responsive designs.
Ready to use with websites running on PHP, ASP, Rails and more. Fine with static files too.
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. 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. 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. Start BrowserSync
A basic use is to watch all CSS files in the
cssdirectory and update connected browsers if a change occurs. Navigate your terminal window to a project and run the appropriate command:
If you’re only using
.htmlfiles, 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"
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"