Skip to content
Hot module reloading for Elm
Branch: master
Clone or download
Latest commit e3eb5d1 Aug 14, 2019



This package provides the core infrastructure needed for doing hot code swapping in Elm. It supports Elm 0.19 only.

This low-level package is only intended for authors of Elm application servers.

If you're looking for something that's easier to use, and you're willing to use Webpack, see elm-hot-webpack-loader, which is built using this package.

The goal of this package is to provide a reusable core that can be used to provide hot code swapping support in a variety of environments--not just Webpack.



  • fixed a bug where HMR would not work for very small ("toy") Elm projects


  • added support for Elm 0.19.1


  • bug fixes


  • improved Browser.application support (Browser.Navigation.Key can be stored anywhere in your model now)


  • separated the Webpack loader out into its own package
  • exposed core API


  • first release

Installing elm-hot core API

$ npm install --save elm-hot

Core API

function inject(str)

Injects the hot code swapping functionality into a compiled Elm app.

  • takes the Javascript code emitted by the Elm compiler as an input string
  • returns a string containing the injected code ready to be eval-ed in the browser.

Example of how the core API could be used

const elmHot = require('elm-hot');
const {compileToStringSync} = require('node-elm-compiler');
const injectedCode = elmHot.inject(compileToStringSync(["src/Main.elm"], {}));

In order to provide something similar to webpack-dev-server with hot module reloading, an application server could be developed to do the following:

  • serve a modified version of the app developer's index.html to receive push events from the server
  • watch .elm files on disk for changes
  • whenever a source file changes, push an event to the client notifying it that it should fetch new code from the server
  • when the client receives the event:
    • fetch the new code (the server will re-compile the Elm code and use elm-hot to inject the hot-code-swapping logic)
    • the client deletes the old Elm object and calls eval() on the new code from the server

I have implemented something similar to this for the integration tests. See test/server.js and test/client.js for inspiration.

The above description is probably a bit too vague, so if you would like more details, create an issue.


Elm hot code swapping is based on the work of Flux Xu's elm-hot-loader.

You can’t perform that action at this time.