Skip to content
CAI
Software that uses CAICheck a score

BrowserSync/browser-sync

47.9

Weak · 2 October 2026

18.3k

lines of production code

JavaScript

with TypeScript

2

measurements over time

CAI band scale
CAI trend line
CAI lens gauges

What this system is

This system is BrowserSync, a development tool that synchronizes browser interactions and automatically reloads pages across multiple devices and browsers. It provides a web-based control panel for managing connections, viewing history, and configuring synchronization options like click and scroll mirroring. The system also includes debugging utilities for network throttling, remote inspection, and layout visualization to aid frontend development.

How it got here

2013–2014 — Browsersync v3 monorepo restructuring

7 changes.

The project underwent a major architectural overhaul to support Browsersync v3, migrating to a Lerna-based monorepo structure and modernizing the development workflow. Legacy code, including the original lib directory and outdated Jasmine test suites, was removed to make way for a new Playwright-based testing infrastructure and Node.js 10+ compatibility. This period focused on establishing the foundational package management, dependency tree, and documentation for the new version.

2018–2023 — BrowserSync 2.0 monorepo rewrite

19 changes.

This period involved a comprehensive rewrite of the BrowserSync codebase into a TypeScript monorepo, migrating the core server and client logic to modern architectures like RxJS and Immutable.js. It also introduced a standalone, plugin-based UI package with new features for remote debugging, network throttling, and granular sync control, supported by extensive new testing infrastructure.

Features

Added HTTPS certificate generation and public API entry points for BrowserSync

This change introduces the core public-facing API and development infrastructure for BrowserSync. It adds a script and pre-generated self-signed certificates in the \certs\ directory to enable local HTTPS support. Additionally, it implements the public API modules in \lib/public\, providing functions to initialize the server (\init\), handle file reloading and streaming (\reload\, \stream\), manage pause/resume states (\pause\, \resume\), send browser notifications (\notify\), and cleanly exit the process (\exit\).

packages/browser-sync/certs, packages/browser-sync/lib/public · high confidence

Expanded documentation with new Browsersync usage examples

The examples directory has been significantly expanded with new demonstration files covering a wide range of Browsersync configurations. Users can now reference examples for custom 404 handling, Express middleware integration, and proxy setups including gzip compression, custom headers, and response rewriting. Additional examples demonstrate server-side features such as HTTP/2 support, PFX certificate usage, multiple base directories, and custom middleware injection. The collection also includes examples for custom snippet placement, LESS file injection, and simulated network latency.

examples · high confidence

Initial BrowserSync UI static assets and build tasks

This change introduces the foundational static assets and build infrastructure for the BrowserSync UI. It adds HTML component templates for the interface, including buttons, forms, headers, footers, panels, lists, switches, and typography, along with help content. Additionally, it includes Gulp tasks to process SVG icons and compile Handlebars templates into the static output directory.

packages/browser-sync-ui/static, packages/browser-sync-ui/tasks · high confidence

Initial release of the BrowserSync UI control panel

This change introduces the BrowserSync UI control panel, a new web-based interface for managing Browsersync sessions. It provides a dashboard with sections for Overview, Sync Options, History, Plugins, Remote Debug, and Network Throttle, allowing users to monitor connections, configure synchronization behaviors, and manage server settings directly from the browser.

packages/browser-sync-ui/src · high confidence

Initial release of the standalone BrowserSync UI package

The BrowserSync UI is now distributed as a separate package (\packages/browser-sync-ui\), making it a distinct component within the monorepo. This change introduces the core plugin interface (\index.js\) that integrates with BrowserSync, along with the complete client-side assets (CSS, JS, and static files) located in the \public\ directory. The package includes its own build configuration (\crossbow.yaml\) and coding standards (\.editorconfig\, \.jshintrc\), establishing the foundation for the UI that is bundled with BrowserSync version 2.0.0 and onwards.

packages/browser-sync-ui/public · high confidence

Network Throttling plugin added to BrowserSync UI

The BrowserSync UI now includes a Network Throttling plugin that allows users to simulate various network conditions (such as DSL, 4G, 3G, and 2G) directly from the interface. This feature enables developers to test how their applications perform under different bandwidth and latency constraints by creating temporary throttled servers with configurable ports and speed targets.

packages/browser-sync-ui/lib/plugins/network-throttle · high confidence

New BrowserSync UI control panel implementation

The BrowserSync control panel has been re-implemented as a dedicated \browser-sync-ui\ package. This introduces a new, standalone HTTP server for the UI (defaulting to port 3001) that operates independently of the main Browsersync server, ensuring the dashboard remains accessible even when the target application is down. The new UI features a plugin-based architecture, allowing for extensible modules like history, remote debugging, and network throttling, and utilizes a dedicated socket.io namespace (\/browser-sync-cp\) to manage real-time connections and client-side element injection.

packages/browser-sync-ui/lib · high confidence

New BrowserSync UI plugins for Connections, History, and Plugins management

The BrowserSync UI now includes dedicated views for managing active connections, browsing history, and installed plugins. The Connections plugin displays a live list of connected browsers and devices, updating in real-time via socket events. The History plugin tracks visited URLs, allowing users to sync all devices to a specific page or clear the history. The Plugins plugin provides a centralized interface to enable or disable user-installed plugins. These changes enhance the developer experience by providing better visibility and control over the synchronized browsing session directly from the UI dashboard.

(repo-wide) · high confidence

New Remote Debug plugin with CSS overlay grid and debugging utilities

The BrowserSync UI now includes a new Remote Debug plugin that adds a dedicated page for inspecting and modifying page styles and network behavior. This update introduces an adjustable CSS overlay grid (with configurable size, color, selector, and axes) to help visualize layout structures, alongside toggleable utilities for CSS outlining (Pesticide), latency simulation, response compression, and cache disabling to aid in frontend debugging.

packages/browser-sync-ui/lib/plugins/remote-debug · high confidence

New Sync Options UI for managing ghost mode and code sync

The BrowserSync UI now includes a dedicated 'Sync Options' page that allows users to toggle individual and bulk settings for synchronized interactions. This new interface provides controls to enable or disable all sync features at once, as well as individual toggles for mirroring clicks, scroll positions, form submissions, text inputs, and radio/checkbox changes across devices. It also includes a setting to reload or inject files when they change, giving users granular control over how their local changes propagate to connected browsers.

packages/browser-sync-ui/lib/plugins/sync-options · high confidence

Removals

Removal of legacy lib directory and style-injector implementation

The \lib\ directory, which contained the original core implementation of the browser-sync tool, has been completely removed. This deletion eliminates the legacy \style-injector\ module, the command-line entry point (\lib/index.js\), the HTML snippet injection middleware (\lib/loadSnippet.js\), and the associated console message templates (\lib/messages.js\). Consequently, the old file-watching, socket.io-based synchronization, and server/proxy logic previously housed in this location is no longer present in this package area.

lib · high confidence

Architecture

Project restructure and modernization for Browsersync v3

The repository has been significantly restructured to support a monorepo architecture and modern development workflows. Key changes include the adoption of Lerna for package management (lerna.json), the addition of Nx for build caching and task running (nx.json), and the migration from Grunt to Playwright for end-to-end testing (playwright.config.ts, removal of Gruntfile.js). The project now targets Node.js 10, 12, and 14, dropping support for older versions like 0.8 and 0.10. Documentation and contributor guidelines have been updated with new CONTRIBUTING.md and ISSUE\_TEMPLATE.md files, and the license has been standardized to Apache 2.0. The README has been completely rewritten to reflect the new Browsersync branding, features, and installation instructions.

(repo-wide) · high confidence

Behavioural changes

Browser-sync client rewritten with RxJS effects architecture

The browser-sync client library has been completely rewritten to use an RxJS-based effects architecture, replacing the previous imperative implementation. This change introduces a structured event-driven system where user interactions (clicks, form inputs, scrolls) are captured by listeners, processed through message handlers, and executed via dedicated effect modules (e.g., \simulate-click\, \set-element-value\, \set-scroll\). The new codebase includes specific handlers for DOM effects like link replacement and style updates, improves IE11 support through polyfills and legacy event handling, and refactors scroll synchronization to support proportional scrolling and element mapping. This architectural shift aims to make the client more maintainable and robust, particularly for complex synchronization scenarios.

packages/browser-sync-client/lib · high confidence

BrowserSync client package restructured and IE11 support added

The browser-sync-client package has been reorganized into a dedicated folder with its own configuration files, including a new .gitignore, Travis CI build setup, and README. The build system now uses webpack with babel-loader configured to target Internet Explorer 11, ensuring compatibility with older browsers. The client script is compiled from TypeScript using ts-loader, and the entry point exports middleware and plugin functions that handle HTTP responses with proper caching headers, conditional GET support, and gzip compression.

packages/browser-sync-client · high confidence

BrowserSync core logic rewritten in TypeScript with new CLI and configuration system

The BrowserSync library has been completely rewritten, migrating the core implementation from JavaScript to TypeScript. This change introduces a new modular architecture for the CLI, featuring dedicated command handlers for start, init, reload, and recipe operations, along with a robust transform pipeline for processing configuration options. The core initialization flow is now driven by a sequence of asynchronous tasks, and the argument parsing logic has been updated to support flexible configuration merging from CLI flags, config files, and package.json. Additionally, the snippet injection logic has been refactored to support a new \snippet\ boolean option, allowing users to explicitly enable or disable the Browsersync snippet injection.

packages/browser-sync/lib · high confidence

Refactored server architecture and added WebAssembly support

The server implementation has been restructured into distinct modules for proxy, static, and snippet modes, improving modularity and maintainability. A key behavioral addition is support for WebAssembly files: the static server wrapper now explicitly registers the 'application/wasm' MIME type, allowing .wasm files to be served correctly in Chrome. The proxy server now uses Immutable.js for configuration and handles cookie domain stripping by default to prevent cross-origin issues. HTTPS configuration has been refined to properly respect the 'passphrase' option and support custom CA certificates.

packages/browser-sync/lib/server · high confidence

Fixes

Updated BrowserSync template injection logic

The BrowserSync templates have been updated to improve script injection reliability. The new \script-tags.html\ template now dynamically appends the BrowserSync script to the document body if available, or falls back to the head if the body is not yet present, addressing issues where the body element might not exist at injection time. Additionally, a new \connector.tmpl\ template has been added to initialize the BrowserSync client configuration and handle protocol upgrades (HTTP to HTTPS) for socket connections, while a new \cli-template.js\ provides a standard configuration file structure for CLI usage.

packages/browser-sync/templates · high confidence

Test coverage

Added Bootstrap 4 test fixtures for UI testing; Added Playwright end-to-end tests for Browsersync; Added end-to-end tests for BrowserSync UI; Added unit tests for the new BrowserSync client architecture; Removed legacy client-side test suite; Removed legacy test suite for the new server implementation; Removed obsolete scrolling test fixture.

Dependencies

Browser-sync package scaffolding and configuration

The browser-sync package directory is initialized with essential build and documentation files. A custom, minified build of lodash (version 4.13.1) is included to provide specific utility functions (such as \merge\, \set\, \get\, and \union\) used by the library, reducing external dependencies. A TypeScript configuration (\tsconfig.json\) is added to compile the source code (located in \lib/\) to ES2015 using CommonJS modules, with output directed to the \dist/\ folder. Additionally, a \.gitignore\ file is created to exclude the build output, and a \readme.md\ is added to document the project's features, installation, and upgrade notes.

packages/browser-sync · high confidence

BrowserSync 3.0.4 monorepo dependency initialization

The project has been restructured into a monorepo (browser-sync-mono) using Lerna 6.1.0, introducing new top-level dependencies for testing and validation: @playwright/test 1.43.0, rxjs 7.5.4, and zod 3.22.2. This change initializes the lockfiles and package manifests for the core browser-sync package, the browser-sync-client, and the browser-sync-ui, all now at version 3.0.4, establishing the foundational dependency tree for the new architecture.

(dependencies) · high confidence

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

How this codebase got here

Score

  • CAI 49 → 48 (-1.0)
  • Rubric changed (rubric-2026.09.12 → rubric-2026.09.18) — scores are not directly comparable.

Lenses

  • Code Health 72 → 73 (+1.1)
  • Architecture 67 → 70 (+2.8)
  • Maturity 53 → 53 (+0.0)
  • Readiness 41 → 34 (-6.4)
  • Security 53 → 63 (+9.4)
  • Accessibility 61 → 61 (+0.0)
  • Performance 100 (new)

Resolved (9)

  • Coverage not measured — JavaScript/TypeScript suite
  • Dependency hygiene PARTLY measured — npm pinning read, dependency currency not (no pnpm-resolved versions to grade)
  • Documentation: no installation or build instructions (README.md)
  • Documentation: no usage examples (README.md)
  • High CVE: [GHSA redacted] (package-lock.json)
  • High CVE: [GHSA redacted] (package-lock.json)
  • High CVE: [GHSA redacted] (packages/browser-sync-ui/package-lock.json)
  • Medium CVE: [CVE redacted] (package-lock.json)
  • Medium CVE: [CVE redacted] (packages/browser-sync/package-lock.json)

New (34)

  • (anonymous) (cognitive 18) (packages/browser-sync-ui/lib/client-js.js)
  • Banned license: ua-parser-js
  • High CVE: [GHSA redacted] (package-lock.json)
  • High CVE: [GHSA redacted] (package-lock.json)
  • Medium CVE: [GHSA redacted] (packages/browser-sync/package-lock.json)
  • Medium CVE: [GHSA redacted] (packages/browser-sync-ui/package-lock.json)
  • Medium CVE: [GHSA redacted] (package-lock.json)
  • Off the main sequence: browser-sync-client
  • Outdated (npm): @playwright/test
  • Outdated (npm): async-each-series
  • Outdated (npm): browser-sync-client
  • Outdated (npm): browser-sync-ui
  • Outdated (npm): chalk
  • Outdated (npm): chokidar
  • Outdated (npm): connect
  • Outdated (npm): connect-history-api-fallback
  • Outdated (npm): fs-extra
  • Outdated (npm): immutable
  • Outdated (npm): mitt
  • Outdated (npm): opn
  • …and 14 more

Written by watchdog.canine.dev from the codebase's own history, inside the signed delivery this page is composed from.

Survey your own repository

BrowserSync/browser-sync was measured the same way every project in this corpus was: the same rubric, at a pinned commit, with the result published in full. Point a surveyor at a repository you know and see whether you agree with it.

About this page

  • The score is its most recent published measurement, taken on 2 October 2026 at a pinned commit. It is not a live figure and does not change until the project is measured again.
  • Measured at commit dc74bc0a6bcbe70eea5f2f94b524b2902436efb1 — the exact code this score is about.
  • Scored under rubric-2026.09.18 — the same rubric and the same method as every other entry in this index.
  • Measured by watchdog.canine.dev using codehealth-analyzer preprod-e569280dd5e2.