# Introducing elm-watch: elm make in watch mode. Fast and reliable

**URL:** <https://discourse.elm-lang.org/t/introducing-elm-watch-elm-make-in-watch-mode-fast-and-reliable/8653>\
**Category:** Show and Tell\
**Created:** [September 8, 2022, 3:32pm UTC](https://discourse.elm-lang.org/t/introducing-elm-watch-elm-make-in-watch-mode-fast-and-reliable/8653 "2022-09-08T15:32:00Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![lydell](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lydell/32/178_2.png) [@lydell](https://discourse.elm-lang.org/u/lydell)\
**Post date:** [September 8, 2022, 3:32pm UTC](https://discourse.elm-lang.org/t/introducing-elm-watch-elm-make-in-watch-mode-fast-and-reliable/8653/1 "2022-09-08T15:32:00Z")

</div>

> [elm-watch](https://github.com/lydell/elm-watch/#readme) 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?

Well, I am. We’re so proud of Elm’s amazing compilation speed and beautiful error messages, but the first thing we do is wrap it in a complicated JavaScript tool that slows things down and prints errors in all red. Support for other languages than JavaScript and TypeScript always feels a bit like an afterthought in such tools.

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](https://github.com/lydell/elm-watch#elm-watch-vs-generic-watcher-tools):

- Handling many rapid changes.
- Supporting multiple apps a nice and fast way.
- I missed hot reloading. It’s so nice to have when styling!

So [I made elm-watch](https://github.com/lydell/elm-watch#what-elm-watch-is). It tries to be as simple, fast and reliable as possible. It also tries to reimagine the level of quality of [hot reloading](https://github.com/lydell/elm-watch#hot-reloading).

Note that [elm-watch isn’t a _replacement_](https://github.com/lydell/elm-watch#what-elm-watch-is-not) 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](https://esbuild.github.io/) together with elm-watch (because it’s fast and simple). [Example](https://github.com/lydell/elm-watch/tree/main/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](https://github.com/lydell/elm-watch#ideas-for-the-future) though.

[Get started](https://github.com/lydell/elm-watch#getting-started) today!

```auto
npm install elm-watch
npx elm-watch init
npx elm-watch hot

```

The elm-watch repo readme contains everything you need to know:

> **[GitHub - lydell/elm-watch: \`elm make\` in watch mode. Fast and reliable.](https://github.com/lydell/elm-watch)**
>
> \`elm make\` in watch mode. Fast and reliable. Contribute to lydell/elm-watch development by creating an account on GitHub.

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 😊 )

[![](https://img.youtube.com/vi/n15nOCZnTac/maxresdefault.jpg "Getting started with elm-watch") ](https://www.youtube.com/watch?v=n15nOCZnTac)

Update: Don’t miss the Elm Radio episode about elm-watch!

> **[Episode 65: elm-watch with Simon Lydell](https://elm-radio.com/episode/elm-watch/)**
>
> Simon Lydell joins us to discuss his new Elm dev server which has a minimalist philosophy and maximal refinement.

---

<div class="post-metadata">

**Author:** ![dta](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dta/32/1917_2.png) [@dta](https://discourse.elm-lang.org/u/dta)\
**Post date:** [September 8, 2022, 4:28pm UTC](https://discourse.elm-lang.org/t/introducing-elm-watch-elm-make-in-watch-mode-fast-and-reliable/8653/2 "2022-09-08T16:28:56Z")

</div>

Thanks for this, it looks like a really slick piece of software!

Do you think that _pre_processing could be a good fit for a new feature? I’ve been considering using the C preprocessor so that I can access \_\_FILE\_\_ and \_\_LINE\_\_ information, but this being incompatible with a watcher has been a blocker for me.

---

<div class="post-metadata">

**Author:** ![lydell](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lydell/32/178_2.png) [@lydell](https://discourse.elm-lang.org/u/lydell)\
**Post date:** [September 8, 2022, 5:00pm UTC](https://discourse.elm-lang.org/t/introducing-elm-watch-elm-make-in-watch-mode-fast-and-reliable/8653/3 "2022-09-08T17:00:03Z")

</div>

Interesting idea! However, there won’t be any _pre_processing in elm-watch (unless it’s added to Elm itself).

- Editors, elm-review and elm-test still need to understand the source code.
- It would be slower. elm-watch does not read every single Elm file you have\* – it just invokes the Elm compiler which does all the heavy lifting.
- I have never felt the need for it myself.

> \* Well, it reads the _top_ of each Elm file _in parallel with running `elm make`_ to figure which files `import` which. I’ve spent a lot of time optimizing that. It’s now fast for a Node.js program – and fast enough for the use case – but running a preprocessor over all files would probably require writing it in another – faster – language. It would have to run _before_ `elm make` so it has to be really, really fast.

One final thought: Since the _post_processing (of the JS output) that does exist in elm-watch simply calls a command of choice that you can configure, couldn’t preprocessing do something similar? I don’t think so, because the preprocessing command would basically have to copy the entire source code to a temporary location – with preprocessing directives replaced – and then elm-watch/elm would compile that. Elm reads files off the file system, and we can’t overwrite the source code.

---

<div class="post-metadata">

**Author:** ![dta](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/dta/32/1917_2.png) [@dta](https://discourse.elm-lang.org/u/dta)\
**Post date:** [September 8, 2022, 8:50pm UTC](https://discourse.elm-lang.org/t/introducing-elm-watch-elm-make-in-watch-mode-fast-and-reliable/8653/4 "2022-09-08T20:50:53Z")

</div>

Thanks for the reply, and your conclusion makes sense.

A couple of thoughts:

- I don’t think it would need to be much slower. It would only need to re-pre-process files that have changed, and the elm compiler already needs to read changed files.
- I agree that this would essentially require copying the sources to a temporary location. That’s the route I’m contemplating exploring in the future.

---

<div class="post-metadata">

**Author:** ![IloSophiep](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ilosophiep/32/3489_2.png) [@IloSophiep](https://discourse.elm-lang.org/u/IloSophiep)\
**Post date:** [September 9, 2022, 5:09pm UTC](https://discourse.elm-lang.org/t/introducing-elm-watch-elm-make-in-watch-mode-fast-and-reliable/8653/5 "2022-09-09T17:09:38Z")

</div>

I recently started a new elm toy project and was missing something like this tool a lot! I already tried it out and it feels great!

Two things as feedback:

- I feel like you could be more ambitious about the project name. In a way it’s an “enhanced” `elm make` and you could show that in the name!
- I was confused why elm-watch hot does not take a debug-flag. When trying it anyways i got a great error message that told me to change that flag in my browser directly. Maybe you could state that in the help message already? That’s where i looked first. Not sure what other people think of if it’s just me 😃

Thanks again for the great tool, i really love it already after a single day of using it. It’s perfect to get a great dev-experience in a simple project and before that i was struggling with webpack and similar tools that just were too fancy for my simple use case. Thanks ❤ !

---

<div class="post-metadata">

**Author:** ![lydell](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lydell/32/178_2.png) [@lydell](https://discourse.elm-lang.org/u/lydell)\
**Post date:** [September 9, 2022, 7:23pm UTC](https://discourse.elm-lang.org/t/introducing-elm-watch-elm-make-in-watch-mode-fast-and-reliable/8653/6 "2022-09-09T19:23:26Z")

</div>

Thank you!

- I like the simplicity of the name `elm-watch`. “Want a watcher for Elm? Use elm-watch!”
- Ah, I’ve never thought of that before! Seeing `elm-watch make [--debug|--optimize] [targets...]` and `elm-watch hot [targets...]` right after each other, one might wonder why only one of them takes flags, yes! It probably makes sense to mention that in the help message as you say. Good feedback!

---

<div class="post-metadata">

**Author:** ![lydell](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lydell/32/178_2.png) [@lydell](https://discourse.elm-lang.org/u/lydell)\
**Post date:** [September 10, 2022, 10:34am UTC](https://discourse.elm-lang.org/t/introducing-elm-watch-elm-make-in-watch-mode-fast-and-reliable/8653/7 "2022-09-10T10:34:21Z")

</div>

@IloSophiep I made a PR to tweak the help text: [Tweak --help text by lydell · Pull Request #24 · lydell/elm-watch · GitHub](https://github.com/lydell/elm-watch/pull/24). Would you mind checking it out, and see if the new text is more clear?

---

<div class="post-metadata">

**Author:** ![Magnetize2072](https://avatars.discourse-cdn.com/v4/letter/m/f17d59/32.png) [@Magnetize2072](https://discourse.elm-lang.org/u/Magnetize2072)\
**Post date:** [September 12, 2022, 1:30pm UTC](https://discourse.elm-lang.org/t/introducing-elm-watch-elm-make-in-watch-mode-fast-and-reliable/8653/8 "2022-09-12T13:30:41Z")

</div>

When I first got into Elm this spring, I was surprised to find the Elm CLI didn’t include a `--watch` mode that does exactly this. A little googling lead me to `elm-watch`. Once your project gets past where you can do all of your of browser based iterating via reactor, adding `elm-watch` is a no brainer.

@lydell Very nice work, happy to see this officially out of beta. Gotta find an excuse to try that esbuild setup.

---

<div class="post-metadata">

**Author:** ![happyraul](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/happyraul/32/4677_2.png) [@happyraul](https://discourse.elm-lang.org/u/happyraul)\
**Post date:** [September 13, 2022, 10:24am UTC](https://discourse.elm-lang.org/t/introducing-elm-watch-elm-make-in-watch-mode-fast-and-reliable/8653/9 "2022-09-13T10:24:37Z")

</div>

In case it’s useful to anyone else, there’s a general tool that works arbitrary commands: [entr](https://eradman.com/entrproject/). Here’s a post that gives some examples on using it as well: [entr: rerun your build when files change](https://jvns.ca/blog/2020/06/28/entr/)

---

<div class="post-metadata">

**Author:** ![lydell](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lydell/32/178_2.png) [@lydell](https://discourse.elm-lang.org/u/lydell)\
**Post date:** [September 13, 2022, 2:43pm UTC](https://discourse.elm-lang.org/t/introducing-elm-watch-elm-make-in-watch-mode-fast-and-reliable/8653/10 "2022-09-13T14:43:43Z")

</div>

I’ve bumped into `entr` before – it looks really cool! I haven’t tried `entr` though, but I have tried other “generic watcher tools”. These are the problems I ran into: [GitHub - lydell/elm-watch: `elm make` in watch mode. Fast and reliable.](https://github.com/lydell/elm-watch/#elm-watch-vs-generic-watcher-tools)

---

<div class="post-metadata">

**Author:** ![tristanp](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/tristanp/32/2685_2.png) [@tristanp](https://discourse.elm-lang.org/u/tristanp)\
**Post date:** [September 13, 2022, 2:56pm UTC](https://discourse.elm-lang.org/t/introducing-elm-watch-elm-make-in-watch-mode-fast-and-reliable/8653/11 "2022-09-13T14:56:45Z")

</div>

This is perfect for the new project I’m starting. I was planning on using elm make instead of parcel on it to get to know my build process better and this will fit in nicely!

Thank you for the hard work.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [September 23, 2022, 2:57pm UTC](https://discourse.elm-lang.org/t/introducing-elm-watch-elm-make-in-watch-mode-fast-and-reliable/8653/12 "2022-09-23T14:57:33Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.