Browser Reloader is a lightweight, pluggable, and configuration-driven file watcher that automatically triggers browser reloads via WebSocket when changes are detected. Perfect for enhancing developer experience during local development workflows.
- 🔍 Watch files and directories for changes
- 🎯 Ignore specific glob patterns
- 🧘 Debounce rapid filesystem events
- 🔕 Quiet mode to suppress logs
- 🔄 Auto reload connected browsers via WebSocket
- ⚙️ Configuration via CLI or config file (
.reloaderrc
,reloader.config.ts
, etc.)
This is version 2 and currently in Beta. While the core features are stable. If you encounter any issues or have feature requests, please feel free to open an issue or contribute directly to the project.
npm install -D browser-reloader
Or globally:
npm install -g browser-reloader
reloader [options]
Flag | Description | Default |
---|---|---|
-w, --watch |
Files or directories to watch | ["."] |
-i, --ignore |
Glob patterns to ignore | ["node_modules/**", ".git/**"] |
-d, --debounce |
Debounce filesystem events (ms) | 300 |
--quiet |
Suppress non-error output | false |
--config <path> |
Path to config file | Auto-detected |
You can use a dedicated config file such as .reloaderrc.json
, reloader.config.ts
, or add a "reloader"
field in package.json
.
module.exports = {
watch: ["./src", "./public"],
ignore: ["node_modules/**", ".git/**"],
debounce: 500,
quiet: false,
};
Add the following to your HTML page:
Locally:
<script src="http://localhost:43878/reloader.js"></script>
Remote Wi-Fi:
<script src="http://{IPv4 Address}:43878/reloader.js"></script>
This will connect to the reloader WebSocket server and reload the page automatically when changes are detected.
- Uses
chokidar
to watch files. - On change, debounces and broadcasts a
"reload"
message viaws
. - Client JavaScript listens to this and triggers
location.reload()
.
import { reloader } from "browser-reloader";
reloader({
watch: ["./src"],
ignore: ["**/*.log"],
debounce: 400,
quiet: true,
});
Contributions are welcome! Feel free to submit a pull request or open an issue on GitHub.