# browser-sync

> Live CSS Reload & Browser Syncing

Latest version **3.0.4** (published 2025-04-02) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install browser-sync
pnpm add browser-sync
yarn add browser-sync
bun add browser-sync
```

Provides the command `browser-sync`.

## Health

**Score 48/100 (D)** — status: stable.

Positive: has types package; no vulnerabilities; high quality score; popular repo.

Warnings: low downloads; no esm support.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 3.0.4 |
| Published | 2025-04-02 |
| First published | 2013-10-13 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | separate (@types/browser-sync) |
| Module format | CommonJS |
| Node | >= 8.0.0 |
| Dependencies | 28 |
| Unpacked size | 568.7 KB |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 12292 |
| Author | Shane Osbourne |
| Maintainers | shakyshane |
| Keywords | browser sync, css, live reload, sync |

## Links

- npm: https://www.npmjs.com/package/browser-sync
- Repository: https://github.com/BrowserSync/browser-sync
- Homepage: https://browsersync.io/
- Issues: https://github.com/BrowserSync/browser-sync/issues
- npm.io page: https://npm.io/package/browser-sync

## Dependencies (28)

- [rx](https://npm.io/package/rx.md) 4.1.0
- [opn](https://npm.io/package/opn.md) 5.3.0
- [etag](https://npm.io/package/etag.md) ^1.8.1
- [send](https://npm.io/package/send.md) ^0.19.0
- [chalk](https://npm.io/package/chalk.md) 4.1.2
- [fresh](https://npm.io/package/fresh.md) ^0.5.2
- [yargs](https://npm.io/package/yargs.md) ^17.3.1
- [dev-ip](https://npm.io/package/dev-ip.md) ^1.0.1
- [connect](https://npm.io/package/connect.md) 3.6.6
- [chokidar](https://npm.io/package/chokidar.md) ^3.5.1
- [fs-extra](https://npm.io/package/fs-extra.md) 3.0.1
- [raw-body](https://npm.io/package/raw-body.md) ^2.3.2
- [immutable](https://npm.io/package/immutable.md) ^3
- [socket.io](https://npm.io/package/socket.io.md) ^4.4.1
- [bs-recipes](https://npm.io/package/bs-recipes.md) 1.3.4
- [http-proxy](https://npm.io/package/http-proxy.md) ^1.18.1
- [micromatch](https://npm.io/package/micromatch.md) ^4.0.8
- [eazy-logger](https://npm.io/package/eazy-logger.md) ^4.1.0
- [portscanner](https://npm.io/package/portscanner.md) 2.2.0
- [serve-index](https://npm.io/package/serve-index.md) ^1.9.1
- [serve-static](https://npm.io/package/serve-static.md) ^1.16.2
- [ua-parser-js](https://npm.io/package/ua-parser-js.md) ^1.0.33
- [easy-extender](https://npm.io/package/easy-extender.md) ^2.3.4
- [resp-modifier](https://npm.io/package/resp-modifier.md) 6.0.2
- [server-destroy](https://npm.io/package/server-destroy.md) 1.0.1
- [browser-sync-ui](https://npm.io/package/browser-sync-ui.md) ^3.0.4
- [browser-sync-client](https://npm.io/package/browser-sync-client.md) ^3.0.4
- [connect-history-api-fallback](https://npm.io/package/connect-history-api-fallback.md) ^1

## Alternatives

- [style-dictionary](https://npm.io/package/style-dictionary.md) — 2.0M weekly downloads
- [postcss-merge-idents](https://npm.io/package/postcss-merge-idents.md) — 1.7M weekly downloads
- [@fontsource/noto-sans](https://npm.io/package/@fontsource/noto-sans.md) — 93.0K weekly downloads
- [uglifycss](https://npm.io/package/uglifycss.md) — 71.6K weekly downloads
- [mat4-interpolate](https://npm.io/package/mat4-interpolate.md) — 23.3K weekly downloads

## Recent versions

- 3.0.4 (latest) — 2025-04-02
- 3.0.0-alpha.2 (next) — 2023-12-27
- 2.29.1-alpha.0 (trim-deps) — 2023-03-22
- 2.24.3-rc1 (rc) — 2018-05-02
- 3.0.3 — 2024-09-23
- 3.0.2 — 2023-12-27
- 3.0.1 — 2023-12-27
- 3.0.0 — 2023-12-27
- 3.0.0-alpha.1 — 2023-12-27
- 3.0.0-alpha.0 — 2023-12-27
- 2.30.0-alpha.3 — 2023-05-19
- 2.30.0-alpha.2 — 2023-05-19
- 2.30.0-alpha.1 — 2023-05-19
- 2.29.3 — 2023-05-17
- 2.29.2 — 2023-05-17
- … 286 more at https://npm.io/package/browser-sync/versions

## README

<p align="center">
<a href="https://travis-ci.org/BrowserSync/browser-sync" title="Travis branch">
 <img src="https://img.shields.io/travis/BrowserSync/browser-sync/master.svg?style=flat-square&label=linux" />
</a><a href="https://www.npmjs.com/package/browser-sync">
 <img src="https://img.shields.io/npm/dm/browser-sync.svg?style=flat-square" />
</a>
</p>
<p align="center">
<a href="https://www.npmjs.com/package/browser-sync" title="NPM version">
 <img src="https://img.shields.io/npm/v/browser-sync.svg?style=flat-square" />
</a>
</p>
<p align="center"><a href="https://www.browsersync.io"><img src="https://raw.githubusercontent.com/BrowserSync/browsersync.github.io/master/public/img/logo-gh.png" /></a></p>
<p align="center">Keep multiple browsers & devices in sync when building websites.</p>

<p align="center">Follow <a href="https://twitter.com/browsersync">@Browsersync</a> on twitter for news & updates.</p>

## Features

Please visit [browsersync.io](https://browsersync.io) for a full run-down of features

## Requirements

Browsersync works by injecting an asynchronous script tag (`<script async>...</script>`) right after the `<body>` tag
during initial request. In order for this to work properly the `<body>` tag must be present. Alternatively you
can provide a custom rule for the snippet using [snippetOptions](https://www.browsersync.io/docs/options/#option-snippetOptions)

## Upgrading from 1.x to 2.x ?
Providing you haven't accessed any internal properties, everything will just work as
there are no breaking changes to the public API. Internally however, we now use an
immutable data structure for storing/retrieving options. So whereas before you could access urls like this...

```js
browserSync({server: true}, function(err, bs) {
    console.log(bs.options.urls.local);
});
```

... you now access them in the following way:

```js
browserSync({server: true}, function(err, bs) {
    console.log(bs.options.getIn(["urls", "local"]));
});
```

## Install and trouble shooting

[browsersync.io docs](https://browsersync.io)

## Integrations / recipes

[Browsersync recipes](https://github.com/Browsersync/recipes)


## Support

If you've found Browser-sync useful and would like to contribute to its continued development & support, please feel free to send a donation of any size - it would be greatly appreciated!

[Support via PayPal](https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=shakyshane%40gmail%2ecom&lc=US&item_name=browser%2dsync)

## Supported by

Originally supported by [JH](https://www.wearejh.com) - they provided financial support as well as access to a professional designer to help with Branding.

Apache 2
Copyright (c) 2021 Shane Osbourne

---
_Source: https://npm.io/package/browser-sync · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._