HTML

Quickly render HTML in Elm.

Examples

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

importHtmlexposing (Html, button, div, text)
importHtml.Eventsexposing (onClick)
type Msg=Increment|Decrementview:Int->HtmlMsgview 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