reloads your modules as needed so that you can have satisfyingly fast feedback loop when developing your app
JavaScript HTML
Latest commit ac9da99 Dec 28, 2016 @capaj added contributors


connects via to an event source such as:

and reloads your ES6 modules as you change them. Similar to browserify hot module replacement, but running in your browser.

Future Plans

systemjs-hmr has been refractored to function as an extension of alexisvincent/systemjs-hmr. This will introduce breaking changes into systemjs-hot-reloader in the future, but the old mechanism will likely receive bug fixes. If you want to start playing/testing the new approach, have a look here


jspm i --dev systemjs-hot-reloader


JSPM 0.17.x

Described by @guybedford himself:

JSPM 0.16.x

Connect to default event emitter port

Use when your event emitter is available at http://localhost:5776 (the default). Include in your index.html:

System.trace = true

At the top of your es6 code:

import 'systemjs-hot-reloader/default-listener.js'

Maps to empty module on production builds, so no needs for any if statements.

Connect to custom event emitter port

Include in your index.html:

if (location.origin.match(/localhost/)) { 
  System.trace = true
    new HotReloader.default('http://localhost:8090')  // chokidar-socket-emitter port

You can drop the if statement, but it is nice and convenient to load reloader only when on localhost. That way you can go into production without changing anything.

Sample projects

Boilerplate set up for hot reloading modules you can fork and use with 3 simple terminal commands(git clone XXX && npm i && npm start):


We're javascript programmers. We should not need to bundle our apps for development. Many folks dislike JSPM because of how slow it is. JSPM deserves another shot, because it can be faster, more robust and more reliable than most alternatives. This simple package proves it. Especially for larger codebases, SPAs and such-reliable hot reloadable modules are a necessray for meaningful feedback loop. React-transform is hacky-very often a change in a source code doesn't manifestate after a reload. Read this article for more info on React-transform vs reloading whole modules.

Preserving state

If you want some state to persist through hot reload, just put it in a module separate from the component. I personally use POJOs with observation, but you are free to use any kind of value store, as long as it sits in separate module from your reloaded component. Another way to do this is by adding a simple systemjs-hot-reloader-store utility.


When a change event is emitted on, we match a module in System._loader.moduleRecords. If a match is found, we then aggressively delete the changed module and recursively all modules which import it directly or indirectly via other modules. This ensures we always have the latest version of code running, but we don't force the browser into unnecessary work. Last step is to import again all modules we deleted, by calling import on the one that changed-module hierarchy will make sure all get loaded again.



See example:


Any module, which leaves side effects in the browser and you want to hot-reload properly should export

export function __unload(){
    // cleanup here

This is needed for example for Angular, which needs clean DOM every time it bootstraps.

This is also needed for some React components, like the Redux Provider and React Router. A crude way to force reloading of React components:

export function __unload() {
  // force unload React components
  ReactDOM.unmountComponentAtNode(DOMNode); // your container node


Most of the credit for this awesome engineering feat should go to Guy Bedford. He paved me a way, I simply followed it.


Code is written in js-standard-style

Tests are run as usual: npm test

  1. fork it
  2. write your code
  3. open PR
  4. lay back and if you want to speed it up, hit me up on twitter