Elm Cheat Sheet

Core syntax, the Elm Architecture (Model/Update/View), types, and JSON decoding for building reliable, no-runtime-exceptions front-end apps.

2 PagesIntermediateJan 14, 2026

Core Syntax & Types

Values, functions, type annotations, and records.

elm

-- Values are immutable; type annotations are optional but idiomaticgreeting : Stringgreeting = "Hello, Elm!"square : Int -> Intsquare n = n * n-- Recordstype alias User =    { name : String    , age : Int    }alice : Useralice = { name = "Alice", age = 30 }-- Update a record (returns a new one)older : Userolder = { alice | age = alice.age + 1 }-- Custom types (ADTs)type Status    = Loading    | Success String    | Failure Stringdescribe : Status -> Stringdescribe status =    case status of        Loading -> "loading..."        Success msg -> "ok: " ++ msg        Failure err -> "error: " ++ err

The Elm Architecture

The Model/Update/View pattern every Elm app is built on.

elm

module Main exposing (main)import Browserimport Html exposing (Html, button, div, text)import Html.Events exposing (onClick)type alias Model = Intinit : Modelinit = 0type Msg    = Increment    | Decrementupdate : Msg -> Model -> Modelupdate msg model =    case msg of        Increment -> model + 1        Decrement -> model - 1view : Model -> Html Msgview model =    div []        [ button [ onClick Decrement ] [ text "-" ]        , div [] [ text (String.fromInt model) ]        , button [ onClick Increment ] [ text "+" ]        ]main : Program () Model Msgmain =    Browser.sandbox { init = init, update = update, view = view }

JSON Decoding

Elm has no null/undefined, so incoming JSON must be decoded explicitly.

elm

import Json.Decode as Decode exposing (Decoder, field, string, int, list)type alias Post =    { id : Int    , title : String    }postDecoder : Decoder PostpostDecoder =    Decode.map2 Post        (field "id" int)        (field "title" string)postsDecoder : Decoder (List Post)postsDecoder =    list postDecoder-- decodeString postDecoder "{\"id\":1,\"title\":\"Hi\"}"-- => Ok { id = 1, title = "Hi" }

Commands & Http

Side effects (HTTP, ports, random) go through Cmd, not directly in update.

elm

import Httptype Msg    = GotPosts (Result Http.Error (List Post))fetchPosts : Cmd MsgfetchPosts =    Http.get        { url = "/api/posts"        , expect = Http.expectJson GotPosts postsDecoder        }update : Msg -> Model -> ( Model, Cmd Msg )update msg model =    case msg of        GotPosts (Ok posts) -> ( { model | posts = posts }, Cmd.none )        GotPosts (Err _) -> ( model, Cmd.none )

elm CLI & Tooling

Common commands from the elm binary and ecosystem.

elm init- scaffold a new project (creates elm.json)
elm make src/Main.elm --output=main.js- compile to JS
elm make src/Main.elm --optimize- production build, smaller output
elm reactor- dev server with live compile at localhost:8000
elm repl- interactive shell for trying expressions
elm install author/package- add a dependency to elm.json
elm-test- run the elm-explorations/test suite
elm-format- canonical formatter, run on save

Pro Tip

Model illegal states out of existence with custom types (e.g. RemoteData Error (List Post) instead of separate isLoading/error/data fields) — the compiler will then force you to handle every case, eliminating whole classes of runtime bugs.

Was this cheat sheet helpful?

Regex Cookbook Cheat Sheet

PureScript Cheat Sheet