Elm Multiview Example

This page demonstrates how Elm Multiview enables an Elm element to render the following model into two distinct DOM elements: elm-example-card and elm-example-details.

type alias Model =
    { thumbnail : Maybe String
    , title : String
    , subtitle : String
    }

Card view

The Example.Card.view renders the model as a card view into the node with id elm-example-card.
If no thumbnail is present it generates an icon using the title with a custom element based on the DiceBear ↗︎ library.

Details view

The Example.Details.view renders the model as a form into the elm-example-details node.
Both views share the same model so Elm re-renders both the Card view and Details view when the form is updated.

Example Sources