# Elm-handlebars - Templating Engine for Elm

**URL:** <https://discourse.elm-lang.org/t/elm-handlebars-templating-engine-for-elm/8417>\
**Category:** Show and Tell\
**Created:** [May 26, 2022, 4:23pm UTC](https://discourse.elm-lang.org/t/elm-handlebars-templating-engine-for-elm/8417 "2022-05-26T16:23:51Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![Lucas\_Payr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lucas_payr/32/4993_2.png) [@Lucas\_Payr](https://discourse.elm-lang.org/u/Lucas_Payr)\
**Post date:** [May 26, 2022, 4:23pm UTC](https://discourse.elm-lang.org/t/elm-handlebars-templating-engine-for-elm/8417/1 "2022-05-26T16:23:52Z")

</div>

Hi there,  
I just wanted to quicky announce [Elm-Handlebars](https://package.elm-lang.org/packages/Orasund/elm-handlebars/latest/). With this you can now write templates using the [handlebar](https://handlebarsjs.com/) language and then use Json Values to generate a String out of it.

## 100% Code Coverage

Shoutout to @ilias for [Elm-Coverage](https://github.com/zwilias/elm-coverage). With this I could create tests that cover all edge cases. Generally, using TTD+Code Coverage works perfectly for writing a complier. It really was a joy and im so happy that i found ilias’s tool.

## Why write a compiler for a templating language?

Mostly because it was fun. But i am also currently working on a little tool called [elm-pen](https://github.com/Orasund/elm-pen) that can be used to generate Elm files using Handlebar templates. It is currently written in ReasonML but im thinking of maybe rewriting it in Elm.

---

<div class="post-metadata">

**Author:** ![Augustin82](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/augustin82/32/1591_2.png) [@Augustin82](https://discourse.elm-lang.org/u/Augustin82)\
**Post date:** [May 27, 2022, 8:07am UTC](https://discourse.elm-lang.org/t/elm-handlebars-templating-engine-for-elm/8417/2 "2022-05-27T08:07:19Z")

</div>

Thanks a lot for sharing your work!

As with most of these posts, I feel a little dense ^^ Would you mind sharing a few use cases? Why am I interested in this? How will I use it? What problems does it solve for me?

Thanks a bunch =)

---

<div class="post-metadata">

**Author:** ![geser](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/geser/32/4594_2.png) [@geser](https://discourse.elm-lang.org/u/geser)\
**Post date:** [May 27, 2022, 10:35am UTC](https://discourse.elm-lang.org/t/elm-handlebars-templating-engine-for-elm/8417/3 "2022-05-27T10:35:43Z")

</div>

I discovered ELM 1hr ago… just looking around and was interested in styling stuff. Found this,  
was just taking a look at the docs and got slapped by this typo “fristname” 🙂 :

```auto
<p>{{fristname}} {{lastname}}</p>

```

---

<div class="post-metadata">

**Author:** ![rupert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rupert/32/1775_2.png) [@rupert](https://discourse.elm-lang.org/u/rupert)\
**Post date:** [May 27, 2022, 11:12am UTC](https://discourse.elm-lang.org/t/elm-handlebars-templating-engine-for-elm/8417/4 "2022-05-27T11:12:49Z")

</div>

> [@geser](#):
>
> I discovered ELM 1hr ago… just looking around and was interested in styling stuff.

Since you have only just started looking at Elm, I feel I should mention that ‘handlebars’ is not the usual way of creating and styling HTML in Elm, like it is in other web frameworks. The usual way in Elm is to create your HTML-as-Elm-code with [html 1.0.0](https://package.elm-lang.org/packages/elm/html/latest/). You might style it using [elm-css 18.0.0](https://package.elm-lang.org/packages/rtfeldman/elm-css/latest/). Or you might go higher level and make use of the elm-ui package [elm-ui 1.1.8](https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/). These are not the only options, but are the most common.

When I first came to Elm, I was surprised by this, and also thought that writing HTML this way would be a very bad idea, since I would no longer be writing bare HTML and injecting values into it, but having to think about my HTML in a more abstract way. That will never catch on I thought; and it certainly takes a while to get used to. As to being a bad idea? I was completely wrong on that, HTML-as-Elm-code is a very powerful concept.

Anyway, sorry for the interuption but felt it necessary to help a beginner with a possible misconception of HTML in Elm. Also interested to hear about your elm-handlebars use cases…

---

<div class="post-metadata">

**Author:** ![Lucas\_Payr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lucas_payr/32/4993_2.png) [@Lucas\_Payr](https://discourse.elm-lang.org/u/Lucas_Payr)\
**Post date:** [May 27, 2022, 5:54pm UTC](https://discourse.elm-lang.org/t/elm-handlebars-templating-engine-for-elm/8417/5 "2022-05-27T17:54:45Z")

</div>

@geser thanks for that → I’ve fixed the typo

@Augustin82 @rupert I was thinking about usecases aswell - As I said, i mostly did it because it was fun - not because it was usefull… 😅

I see a real potential in CLI programs written in Elm. Handlebar (or Mustache? 🤔) is currently used in [Elm-spa](https://www.elm-spa.dev/) and im using it for Elm-pen aswell.

Unrelated but related: I originally encountered handlebars at work, where we use the [swagger-codegen](https://github.com/swagger-api/swagger-codegen) (which also works for Elm). However, it is a Java project. 🤔 Though technology wise one could replace it with elm-pen - it would work the same way.

---

<div class="post-metadata">

**Author:** ![rupert](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/rupert/32/1775_2.png) [@rupert](https://discourse.elm-lang.org/u/rupert)\
**Post date:** [May 30, 2022, 10:01am UTC](https://discourse.elm-lang.org/t/elm-handlebars-templating-engine-for-elm/8417/6 "2022-05-30T10:01:42Z")

</div>

Occurs to me that you could use it to statically check a template with handlebars.

Typically in Javascript, a mistake in the handlebars template will be detected at runtime. If you evaluate a handlebars template against a typed Elm model, which is going to supply the value to insert into the template, missing/incorrect values should be detectable at runtime. I guess if you are transforming the handlebars template into Elm code, the Elm compiler will do that checking for you.

---

<div class="post-metadata">

**Author:** ![Lucas\_Payr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lucas_payr/32/4993_2.png) [@Lucas\_Payr](https://discourse.elm-lang.org/u/Lucas_Payr)\
**Post date:** [May 30, 2022, 3:39pm UTC](https://discourse.elm-lang.org/t/elm-handlebars-templating-engine-for-elm/8417/7 "2022-05-30T15:39:41Z")

</div>

Yeah that was also my original idea. But then i came across the `lookup` function.  
This function takes a String as input, converts it into a path and returns the value behind that path.

```auto
{{lookup . "key"}}

```

The result for the json `{"key":"name","name":"Elm", "isAwesome": true }` would be the string `Elm`. But for the json `{"key":"isAwesome","name":"Elm", "isAwesome": true }` it would be the boolean `true`. How would you type check this?

---

<div class="post-metadata">

**Author:** ![Janiczek](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/janiczek/32/4516_2.png) [@Janiczek](https://discourse.elm-lang.org/u/Janiczek)\
**Post date:** [June 7, 2022, 1:13pm UTC](https://discourse.elm-lang.org/t/elm-handlebars-templating-engine-for-elm/8417/8 "2022-06-07T13:13:21Z")

</div>

Out of curiosity (sorry for offtopic), does `elm-coverage` work well for you or did it take some persuading to work?

---

<div class="post-metadata">

**Author:** ![Lucas\_Payr](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/lucas_payr/32/4993_2.png) [@Lucas\_Payr](https://discourse.elm-lang.org/u/Lucas_Payr)\
**Post date:** [June 8, 2022, 5:23am UTC](https://discourse.elm-lang.org/t/elm-handlebars-templating-engine-for-elm/8417/9 "2022-06-08T05:23:59Z")

</div>

Elm-coverage worked like a charm. I have nothing but praise to give.

It worked exactly as I expected. The HTML UI gives you an overview of what needs to be covered, grouped by type of test (case … of, parameter and so on) and file. clicking on one of the fields lets you jump into a more detailed explanation where you can see the same table only now grouped by the functions inside the file. Clicking on it again lets you jump directly into the code and see exactly the things that are currently not covered.

---

<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:** [June 18, 2022, 5:24am UTC](https://discourse.elm-lang.org/t/elm-handlebars-templating-engine-for-elm/8417/10 "2022-06-18T05:24:13Z")

</div>

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