Skip to content

caseyWebb/elm-html

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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: