Here we create our UI explorer app.

import MyCoolUi
import UiExplorer


pages =
    UiExplorer.firstPage
        "Button"
        (UiExplorer.static MyCoolUi.button)
        |> UiExplorer.nextPage
            "Footer"
            (UiExplorer.static MyCoolUi.footer)
        |> UiExplorer.nextPage
            "Login Form"
            { init = MyCoolUi.loginInit
            , update = MyCoolUi.loginUpdate
            , view =
                \pageSize model ->
                    MyCoolUi.loginView model
            , subscriptions = always Sub.none
            }


main =
    UiExplorer.application
        UiExplorer.defaultConfig
        pages

Note that we didn't add type signatures for pages and main in the example. If we did, we'd have to update it every time we add a new page and the type signatures would get messy. Instead it's best to just let the compiler infer it automatically.

The default application configuration.

{ flagsDecoder = Decode.succeed ()
, layoutOptions = []
, layoutAttributes = []
, relativeUrlPath = []
, title = Element.text "UI explorer"
}

These are settings we can change when creating our UI explorer application.

• flagsDecoder lets us parse json flags we pass to our app. This gets passed along to the init function in our pages (or the view function if you're creating a static page).
• layoutOptions and layoutAttributes are used in our app's Element.layoutWith to control things like the default font or focusStyle.
• relativeUrlPath sets the relative path to pages. relativeUrlPath = [] makes the page link look like this https://localhost/MyPage, and relativeUrlPath = [ ui, here ] produces https://localhost/ui/here/MyPage

The first page in your UI explorer. This is the default page if the user doesn't specify a url path.

import Element
import UiExplorer


pages =
    UiExplorer.firstPage
        "My first page"
        (UiExplorer.static (\_ _ -> Element.text "Hi!"))

Additional pages in your UI explorer. You have to start with firstPage before chaining the result to nextPages. Each page must also have a unique name.

import Element
import UiExplorer


pages =
    UiExplorer.firstPage
        "My first page"
        (UiExplorer.static (\_ _ -> Element.text "Hi!"))
        |> UiExplorer.nextPage
            "My second page"
            (UiExplorer.static (\_ _ -> Element.none))

If your list of pages on the sidebar is starting to get too long, you can group some of them together with groupPages.

import MyPages
import UiExplorer


flatPages =
    UiExplorer.firstPage "Login" MyPage.login
        |> UiExplorer.nextPage "About us" MyPage.aboutUs
        |> UiExplorer.nextPage "Fonts" MyPage.fonts
        |> UiExplorer.nextPage "Colors" MyPage.colors
        |> UiExplorer.nextPage "Basic components" MyPage.basicComponents
        |> UiExplorer.nextPage "Homepage" MyPage.homepage


nowItsGrouped =
    UiExplorer.firstPage "Login" MyPage.login
        |> UiExplorer.nextPage "About us" MyPage.aboutUs
        |> UiExplorer.groupPages "Building blocks"
            (UiExplorer.nextPage "Fonts" MyPage.fonts
                >> UiExplorer.nextPage "Colors" MyPage.colors
                >> UiExplorer.nextPage "Basic components" MyPage.basicComponents
            )
        |> UiExplorer.nextPage "Homepage" MyPage.homepage

Two things to note:

• Normally pages need unique names, but with groups it's okay to have two pages use the same name so long as they are in different groups.
• Due to firstPage having a different type signature from nextPage, you can't place the first page in a group. If this is a problem, create an issue on github explaining your use case.

A page that doesn't change or react to user input. It's just a view function.

Get the relative paths to all the pages you've defined.

pages =
    UiExplorer.firstPage "First page" (UiExplorer.static (\_ _ -> Element.none))
        |> UiExplorer.nextPage "Second page" (UiExplorer.static (\_ _ -> Element.none))


paths =
    -- [ "/First%20page", "/Second%20page" ]
    getPagePaths [] pages


pathWithSubdomain =
    -- [ "/subdomain/First%20page", "/subdomain/Second%20page" ]
    getPagePaths [ "subdomain" ] pages

All the functions you need for wiring together an interactive page. It's basically just Browser.element.

import MyCoolUi
import UiExplorer


loginPage =
    { init = MyCoolUi.loginInit
    , update = MyCoolUi.loginUpdate
    , view = \pageSize model -> MyCoolUi.loginView model
    , subscriptions = always Sub.none
    }


pages =
    UiExplorer.firstPage "Login Form" loginPage

The size of the page your UI gets placed in. This is not the same as Browser.Events.resize since the UI explorer displays a sidebar that can take up some of the window space.