Learn ELM-UI with Real Code Examples

module Main exposing (main)

import Browser
import Element exposing (..)
import Element.Events exposing (onClick)

-- MODEL

type alias Model =
    { count : Int }

initialModel : Model
initialModel =
    { count = 0 }

-- UPDATE

type Msg = Increment | Decrement | Reset

update : Msg -> Model -> Model
update msg model =
    case msg of
        Increment -> { model | count = model.count + 1 }
        Decrement -> { model | count = model.count - 1 }
        Reset -> { model | count = 0 }

-- VIEW

view : Model -> Element Msg
view model =
    column [ spacing 10, padding 20, alignCenter ]
        [ text ("Counter: " ++ String.fromInt model.count)
        , row [ spacing 10 ]
        [ button [ onClick Increment ] (text "+")
        , button [ onClick Decrement ] (text "-")
        , button [ onClick Reset ] (text "Reset")
        ]
        ]

-- MAIN

main =
    Browser.sandbox { init = initialModel, update = update, view = view }

Demonstrates a simple counter layout using Elm UI declarative syntax.

module Main exposing (main)

import Browser
import Element exposing (..)

view : Element msg
view =
    column [ spacing 10, padding 20, alignCenter ]
        [ text "Hello, Elm UI!" ]

main = Browser.sandbox { init = (), update = \_ model -> model, view = \_ -> view }

Displays a simple 'Hello World' message using Elm UI.

module Main exposing (main)

import Browser
import Element exposing (..)
import Element.Events exposing (onClick)

-- MODEL

type alias Model =
    { clicked : Bool }

initialModel : Model
initialModel =
    { clicked = False }

-- UPDATE

type Msg = Click

update : Msg -> Model -> Model
update msg model =
    case msg of
        Click -> { model | clicked = True }

-- VIEW

view : Model -> Element Msg
view model =
    column [ spacing 10, padding 20, alignCenter ]
        [ text (if model.clicked then "Button Clicked!" else "Click the Button")
        , button [ onClick Click ] (text "Click Me")
        ]

-- MAIN

main = Browser.sandbox { init = initialModel, update = update, view = view }

Changes label text when button is clicked.

module Main exposing (main)

import Browser
import Element exposing (..)
import Element.Events exposing (onClick)

-- MODEL

type alias Model =
    { on : Bool }

initialModel : Model
initialModel =
    { on = False }

-- UPDATE

type Msg = Toggle

update : Msg -> Model -> Model
update msg model =
    case msg of
        Toggle -> { model | on = not model.on }

-- VIEW

view : Model -> Element Msg
view model =
    column [ spacing 10, padding 20, alignCenter ]
        [ text (if model.on then "ON" else "OFF")
        , button [ onClick Toggle ] (text "Toggle")
        ]

-- MAIN

main = Browser.sandbox { init = initialModel, update = update, view = view }

A toggle button that switches between ON and OFF states.

module Main exposing (main)

import Browser
import Element exposing (..)
import Element.Events exposing (onInput)

-- MODEL

type alias Model =
    { inputText : String }

initialModel : Model
initialModel =
    { inputText = "" }

-- UPDATE

type Msg = Input String

update : Msg -> Model -> Model
update msg model =
    case msg of
        Input str -> { model | inputText = str }

-- VIEW

view : Model -> Element Msg
view model =
    column [ spacing 10, padding 20, alignCenter ]
        [ text ("You typed: " ++ model.inputText)
        , Element.input [ onInput Input ]
        ]

-- MAIN

main = Browser.sandbox { init = initialModel, update = update, view = view }

Captures user input and displays it dynamically.

module Main exposing (main)

import Browser
import Element exposing (..)
import Element.Events exposing (onClick)

-- MODEL

type alias Model =
    { count : Int, step : Int }

initialModel : Model
initialModel =
    { count = 0, step = 5 }

-- UPDATE

type Msg = Increment | Decrement

update : Msg -> Model -> Model
update msg model =
    case msg of
        Increment -> { model | count = model.count + model.step }
        Decrement -> { model | count = model.count - model.step }

-- VIEW

view : Model -> Element Msg
view model =
    column [ spacing 10, padding 20, alignCenter ]
        [ text ("Count: " ++ String.fromInt model.count)
        , row [ spacing 10 ]
        [ button [ onClick Increment ] (text "+")
        , button [ onClick Decrement ] (text "-")
        ]
        ]

-- MAIN

main = Browser.sandbox { init = initialModel, update = update, view = view }

A counter that increases or decreases by a specified step.

module Main exposing (main)

import Browser
import Element exposing (..)
import Element.Background as Background
import Element.Events exposing (onClick)

-- MODEL

type alias Model =
    { active : Bool }

initialModel : Model
initialModel = { active = False }

-- UPDATE

type Msg = Toggle

update : Msg -> Model -> Model
update msg model =
    case msg of Toggle -> { model | active = not model.active }

-- VIEW

view : Model -> Element Msg
view model =
    column [ spacing 10, padding 20, alignCenter ]
        [ el [ width (px 100), height (px 100), Background.color (if model.active then blue else red) ] (text "")
        , button [ onClick Toggle ] (text "Change Color")
        ]

-- MAIN

main = Browser.sandbox { init = initialModel, update = update, view = view }

Changes a colored box when a button is clicked.

module Main exposing (main)

import Browser
import Element exposing (..)
import Element.Events exposing (onInput)

-- MODEL

type alias Model =
    { progress : Float }

initialModel : Model
initialModel = { progress = 0 }

-- UPDATE

type Msg = Update Float

update : Msg -> Model -> Model
update msg model =
    case msg of Update val -> { model | progress = val }

-- VIEW

view : Model -> Element Msg
view model =
    column [ spacing 10, padding 20, alignCenter ]
        [ el [ width fill, height (px 20), Background.color blue, padding 0 ] (el [] (text (String.fromFloat model.progress)))
        , Element.input [ onInput (str -> Update (String.toFloat str |> Result.withDefault 0)) ]
        ]

-- MAIN

main = Browser.sandbox { init = initialModel, update = update, view = view }

A slider that updates a visual progress bar.

module Main exposing (main)

import Browser
import Element exposing (..)
import Element.Events exposing (onClick)

-- MODEL

type alias Model = { items : List String }

initialModel : Model
initialModel = { items = [] }

-- UPDATE

type Msg = AddItem String

update : Msg -> Model -> Model
update msg model =
    case msg of AddItem str -> { model | items = model.items ++ [str] }

-- VIEW

view : Model -> Element Msg
view model =
    column [ spacing 10, padding 20 ]
        ( List.map (item -> text item) model.items ++ [ button [ onClick (AddItem "New Item") ] (text "Add Item") ] )

-- MAIN

main = Browser.sandbox { init = initialModel, update = update, view = view }

Displays a dynamic list of items with buttons to add new entries.