# BrowserSync — Live Reload and Multi-Device Sync for Web Development

> A development tool that watches files for changes and instantly refreshes connected browsers. Synchronizes scrolling, clicks, and form inputs across multiple devices for efficient cross-device testing.

## Install

Save in your project root:

# BrowserSync — Live Reload and Multi-Device Sync for Web Development

## Quick Use
```bash
npm install -g browser-sync
browser-sync start --server --files "css/*.css, *.html"
# Or proxy an existing server
browser-sync start --proxy "localhost:3000" --files "**/*.css, **/*.html"
```

## Introduction
BrowserSync is a development tool that keeps multiple browsers and devices in sync during web development. It watches your source files, injects CSS changes without a full page reload, and synchronizes interactions like scrolling, clicking, and form input across every connected device and browser tab.

## What BrowserSync Does
- Watches files and triggers live reload or CSS injection when changes are detected
- Synchronizes scroll position, click events, and form inputs across all connected browsers
- Runs a local static file server or proxies an existing development server
- Provides a web-based UI dashboard for controlling reload behavior, network throttling, and sync options
- Generates an external URL for testing on phones, tablets, and other devices on the same network

## Architecture Overview
BrowserSync runs a Node.js server that injects a small JavaScript snippet into served HTML pages. This snippet opens a WebSocket connection back to the BrowserSync server. When file changes are detected via chokidar (a file watcher), the server notifies all connected clients. CSS files are hot-swapped by updating `<link>` tags in place; other file types trigger a full page reload. Interaction syncing works by capturing DOM events on one client and replaying them on all others.

## Self-Hosting & Configuration
- Install globally via npm or add as a dev dependency in your project
- In server mode, specify the base directory with `--server ./dist` and watch patterns with `--files`
- In proxy mode, wrap an existing dev server (Express, Django, Rails) and layer in live reload
- Create a `bs-config.js` file for persistent configuration including middleware, custom routes, and HTTPS settings
- Access the BrowserSync UI at `localhost:3001` (default) to toggle sync options and simulate network conditions

## Key Features
- CSS injection without full page reload for near-instant visual feedback
- Multi-device synchronization of scrolls, clicks, form fills, and navigation
- Built-in static server and reverse proxy modes
- Network throttle simulation to test on slow 3G, fast 3G, or custom bandwidth profiles
- Integrates with Gulp, Grunt, Webpack, and other build tools via its Node.js API

## Comparison with Similar Tools
- **live-server** — simple live reload server without multi-device sync or CSS injection; lighter but less capable
- **Vite** — modern dev server with HMR for module-based projects; BrowserSync works with any tech stack including static HTML
- **Webpack Dev Server** — HMR for Webpack projects; BrowserSync adds cross-device sync and works outside the Webpack ecosystem
- **http-server** — static file server with no live reload; BrowserSync adds watching, injection, and sync

## FAQ
**Q: Does BrowserSync work with frameworks like React or Vue?**
A: Yes, use proxy mode to wrap your framework's dev server. BrowserSync adds its sync and reload layer on top.

**Q: Can I use HTTPS with BrowserSync?**
A: Yes, pass `--https` for a self-signed certificate or configure custom cert/key paths in `bs-config.js`.

**Q: How does CSS injection work?**
A: BrowserSync detects CSS file changes and updates the `<link>` tag's `href` attribute in connected browsers, causing the browser to re-fetch only the stylesheet without reloading the page.

**Q: Does it work over a local network for mobile testing?**
A: Yes, BrowserSync displays an external URL (your machine's LAN IP) that any device on the same network can open.

## Sources
- https://github.com/BrowserSync/browser-sync
- https://browsersync.io/

---
Source: https://tokrepo.com/en/workflows/asset-2cf4cbd0
Author: AI Open Source