halohalospecial/elm-html

Use HTML in Elm!

HTML in Elm

Create composable widgets with the full power of HTML and CSS. This library lets you:

• Render really freakin' fast
• Reuse existing CSS
• Use all the latest standards, such as flexbox

Embedding Elm widgets in existing applications and JS interop are both really easy, so this library takes the next logical step in improving Elm's interop story.

Check out the TodoMVC app for a larger example.

Reusable Widgets

With this library, you have the full power of Elm to create nice abstractions to make your view code modular. Creating a list of user profiles is a matter of can be nicely abstracted with something like this:

import Html (..)

profiles : [User] -> Html
profiles users =
    node "div" [] [] (map profile users)

profile : User -> Html
profile user =
    node "div" [] []
    [ node "img" [ "src" := user.picture ] [] []
    , text user.name
    ]

Of course you may want to use more complex styles, but those can be abstracted out and reused too!

import Html
import Html (..)

profiles : [User] -> Html
profiles users =
    node "div" [] (font ++ background) (map profile users)

font : [(String,String)]
font =
    [ "font-family" := "futura, sans-serif"
    , "color"       := Html.color charcoal
    , "font-size"   := em 1.2
    ]

background : [(String,String)]
background =
    [ "background-color" := Html.color lightGrey ]

With these basic building blocks, it becomes possible to start building stronger abstractions on top of basic HTML and CSS. For example, it may be possible to recreate Elm's Element abstraction using this framework. But more importantly, it is possible for anyone to experiment with other ways to make views modular and pleasant to specify.

Performance

We have written a TodoMVC app with this library and benchmarked it against other popular entries. The benchmark shows that elm-html is really fast, thanks entirely to the virtual-dom project it is built on top of.

Influences

Huge thanks to React and Om which popularized the idea of virtual DOM and came up with optimizations to make it really fast. Another huge thanks to Matt Esch and Jake Verbaten who created virtual-dom and mercury which this library is based on!