VirtualDom

API to the core diffing algorithm. Can serve as a foundation for libraries that expose more helper functions for HTML or SVG.

Create

text : String -> Node

Just put plain text in the DOM. It will escape the string so that it appears exactly as you specify.

text "Hello World!"

node : String -> List Property -> List Node -> Node

Create a DOM node with a tag name, a list of HTML properties that can include styles and event listeners, a list of CSS properties like color, and a list of child nodes.

import Json.Encode as Json


hello : Node
hello =
    node "div" [] [ text "Hello!" ]


greeting : Node
greeting =
    node "div"
        [ property "id" (Json.string "greeting") ]
        [ text "Hello!" ]

Conversions

toElement : Int -> Int -> Node -> Element

Embed an Node value in Elm's rendering system. Like any other Element, this requires a known width and height, so it is not yet clear if this can be made more convenient in the future.

fromElement : Element -> Node

Embed an Element as Html.

Declare Properties

property : String -> Value -> Property

Events

on : String -> Decoder a -> (a -> Message) -> Property

Modules

VirtualDom