HTML

Quickly render HTML in Elm.

Examples

The HTML part of an Elm program looks something like this:

import Html exposing (Html, button, div, text)
import Html.Events exposing (onClick)

type Msg = Increment | Decrement

view : Int -> Html Msg
view count =
  div []
    [ button [ onClick Decrement ] [ text "-" ]
    , div [] [ text (String.fromInt count) ]
    , button [ onClick Increment ] [ text "+" ]
    ]

If you call view 42 you get something like this:

<div>
  <button>-</button>
  <div>42</div>
  <button>+</button>
</div>

This snippet comes from a complete example. You can play with it online here and read how it works here.

You can play with a bunch of other examples here.

Learn More

Definitely read through guide.elm-lang.org to understand how this all works! The section on The Elm Architecture is particularly helpful.

Implementation

This library is backed by elm/virtual-dom which handles the dirty details of rendering DOM nodes quickly. You can read some blog posts about it here:

• Blazing Fast HTML, Round Two
• Blazing Fast HTML