elm-watch recompiles whenever your Elm files change and reloads the compiled JS in the browser.
Are you tired of webpack, Parcel or Vite being buggy, slow or just a bit “meh” in its Elm support? Do you miss colored Elm error messages? Are you annoyed by hot reloading that stops working?
I wanted to go back to that pure
elm make experience. First I tried simply running
elm make in a simple off the shelf watcher tool. But I ran into some problems:
- Handling many rapid changes.
- Supporting multiple apps a nice and fast way.
- I missed hot reloading. It’s so nice to have when styling!
Note that elm-watch isn’t a replacement for webpack, Parcel or Vite. Like plain
elm make, the job of
elm-watch is to take .elm files and turn them into .js files. The rest is up to you. You can run webpack on the side for other frontend needs, but let elm-watch take care of Elm compilation. Personally, I use esbuild together with elm-watch (because it’s fast and simple). Example.
elm-watch started forming in my head early 2021. In May that year I started coding, and in March 2022 I released the first beta version. Since then I’ve released another dozen or so beta versions and started using it in production. Now it’s finally out of beta and I’ve released version 1.0.0!
The project now feels really solid and does everything I need. I do have some ideas for the future though.
Get started today!
npm install elm-watch npx elm-watch init npx elm-watch hot
The elm-watch repo readme contains everything you need to know:
Finally, a big thank you to Ed Kelly for testing and reporting issues!
I also made a little video showing how to get started and a little bit of what it’s like using elm-watch. (Excuse my poor video making skills! It’s all a single take )
Update: Don’t miss the Elm Radio episode about elm-watch!