Set the page title in elm?

Question

How can I set the page title in elm, at program startup?

I found this in the docs: (http://elm-lang.org/docs/syntax)

Elm has some built-in port handlers that automatically take some imperative action:

title sets the page title, ignoring empty strings

However I am still not able to wrap my head completely around ports, nor can I find any examples of this specific port in use. So I don't know, for example, even the port's type signature.

I know I could do this by making my own index.html and embedding the elm program inside of it, but I'd like to figure this out within elm itself, even if for no other reason than to learn how it is done. (And hopefully learn something about ports too...)

Answer 1

In Elm 0.19, there is the type Browser.Document defined.

type alias Document msg =
    { title : String
    , body : List (Html msg)
    }

This data specifies the and all of the nodes that should go in the . This means you can update the title as your application changes. Maybe your "single-page app" navigates to a "different page", maybe a calendar app shows an accurate date in the title, etc.

If you create your program with Browser.document or Browser.application, you can simply set the title of your web page.

view : Model -> Browser.Document Msg
view model =
    { title = "This goes to the title"
    , body = [ text "Hello world!" ]
    }

main : Program Flags Model Msg
main =
    Browser.document
        { init = init
        , view = view
        , update = update
        , subscriptions = subscriptions
        }