explaingit

browsersync/browser-sync

★ 12,288JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

A development tool that automatically reloads all your open browsers and devices whenever you change a file, and mirrors scrolling and clicks across them, making it easy to test a website on multiple screens at once.

Mindmap

mindmap
  root((BrowserSync))
    What it does
      Auto browser reload
      Multi-device sync
      Interaction mirroring
    How it works
      Injected script
      Local file server
      Proxy mode
    Integrations
      Gulp pipelines
      webpack builds
      npm CLI
    Tech stack
      JavaScript
      Node.js
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Automatically reload a browser whenever you save a CSS or HTML file during local development.

USE CASE 2

Test a website on a phone and desktop simultaneously with synchronized scrolling and clicks.

USE CASE 3

Proxy an existing local development server to add live-reload on top without changing your setup.

Tech stack

JavaScriptNode.js

Getting it running

Difficulty · easy Time to first run · 5min
Use freely for any purpose including commercial use, with no restrictions beyond including the Apache 2.0 license notice.

In plain English

BrowserSync is a development tool that keeps multiple browsers and devices in sync while you build a website. When you change a file, such as a CSS stylesheet or an HTML page, BrowserSync automatically reloads the page in every browser and device you have open at the same time. If you scroll or click in one browser, those interactions are mirrored in the others. This makes it easier to test how a site looks and behaves across desktop browsers, tablets, and phones without having to manually reload each one. It works by injecting a small script into the pages it serves. That script connects each open browser back to a local server running on your machine and listens for change notifications. BrowserSync can serve a local folder as a simple static file server, or it can act as a proxy in front of an existing local development server so the sync features layer on top of whatever setup you already have. The tool is installed via npm and is commonly used alongside build tools like Gulp or webpack. The README is brief and points to the project website at browsersync.io for a full list of features, configuration options, and integration recipes. The project is licensed under the Apache 2.0 license.

Copy-paste prompts

Prompt 1
Set up BrowserSync to watch a local folder for CSS and HTML changes and automatically reload my browser whenever I save a file.
Prompt 2
I have a local Node.js dev server running on port 3000. Show me how to configure BrowserSync as a proxy so I get live reload on top of my existing server.
Prompt 3
Add BrowserSync to a Gulp build pipeline so CSS changes are injected without a full reload and HTML changes trigger a full page reload.
Open on GitHub → Explain another repo

← browsersync on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.