Use HTML in Elm!
BSD 3-Clause "New" or "Revised" License
374
33
101

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:

Contributors

process-bot
evancz
rehno-lindeque
salutis
shaydon
albronca
thSoft
TheSeamau5
passy
rick68
stevensona
adzeitor
gaul
smiley325
benjamintanweihao
cmoel
jwmerrill
jragonfyre
Apanatshka
joefiorini
laszlopandy
liamcurry
camilleriluke
martinos
Warry
vilterp
robertjlooby
saljam
sudhirvkumar
tobiasgwaaler
halohalospecial
stormont
teehemkay
xarvh