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...)

score 18 · Answer 1 · answered Nov 08 '16 at 16:17

As of Elm v0.17 the built-in title port has been removed, but it's very easy to add the port yourself. The following program will set the page title to "This is the title" at launch:

port module Main exposing (..)

import Html.App as App
import Html exposing (Html, text)

main =
  App.program
    { init = init
    , view = view
    , update = update
    , subscriptions = subscriptions
    }

port title : String -> Cmd a

type alias Model = {}

init : (Model, Cmd Msg)
init =
  ({}, title "This is the title")


type Msg
  = Noop

update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
  case msg of
    Noop ->
      (model, Cmd.none)

subscriptions : Model -> Sub Msg
subscriptions model =
  Sub.none

view : Model -> Html Msg
view model =
  text "Hello World"

Then, in Javascript you need to subscribe to the port:

var app = Elm.Main.fullscreen();
app.ports.title.subscribe(function(title) {
    document.title = title;
});

robertjlooby · Accepted Answer · 2015-12-29T17:40:58.523

8

The type signature is whatever you define it to be. As an example of a simple app using the title port to set the title:

import Html exposing (text)

port title : String
port title = "The page title"

main =
  text "Hello, World!"

As a slightly more complex example you could set the page title to update to the current time every second

import Html exposing (text)
import Time exposing (every, second)

port title : Signal Float
port title = every second

main =
    text "Hello, World!"

edited Dec 29 '15 at 17:40

answered Nov 09 '15 at 18:16

robertjlooby

7,160
2
33
45

1

Awesome, thanks! How does the port get executed? It isn't called from main? Or is every port function executed at page load time? – Tom Kludy Nov 09 '15 at 22:27
2

This doesn't work as of v17! The title port was removed. – Andrew B. Jul 27 '16 at 18:21
1

@Andrew Badr I get into the same trouble on v17. Do you find a way to resolve it? – Junle Li Aug 05 '16 at 16:38
@JunleLi you have to do something custom with FFI. I decided not to use Elm. :) – Andrew B. Aug 06 '16 at 19:34

score 5 · Answer 3 · answered May 02 '20 at 10:18

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
        }

Set the page title in elm?

3 Answers3