Quickly render HTML in Elm.
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.
Definitely read through guide.elm-lang.org to understand how this all works! The section on The Elm Architecture is particularly helpful.
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: