Elm Mastery: Automating Type-Safe Data Handling

JSON to Elm Decoder: Generating Type Aliases and Json.Decode Pipelines

Elm requires explicit JSON decoders — there is no implicit deserialization. Every field you pull from a JSON response must be decoded with a specific decoder (Decode.string, Decode.int, Decode.bool), and the entire decoder must be assembled with Json.Decode.Pipeline. This explicitness is what makes Elm programs famously reliable at runtime, but writing decoders by hand is tedious. Generating them from a JSON sample gives you the type alias and pipeline decoder ready to use in an HTTP request.

Live Example: API Response Decoder

// Input JSON
{
  "user_id": "usr_4421",
  "username": "elm_dev",
  "email": "elm@example.com",
  "score": 8750,
  "is_active": true,
  "bio": null
}

-- Generated Elm Code
module MyApp.Root exposing (..)

import Json.Decode as Decode exposing (Decoder)
import Json.Decode.Pipeline exposing (required, optional)

type alias Root =
    { user_id : String
    , username : String
    , email : String
    , score : Float
    , is_active : Bool
    , bio : Maybe String
    }

decoder : Decoder Root
decoder =
    Decode.succeed Root
        |> required "user_id"   Decode.string
        |> required "username"  Decode.string
        |> required "email"     Decode.string
        |> required "score"     Decode.float
        |> required "is_active" Decode.bool
        |> optional "bio"       (Decode.nullable Decode.string) Nothing

Refined: Idiomatic Field Names and Int Types

module User exposing (User, decoder, encode)

import Json.Decode as Decode exposing (Decoder)
import Json.Decode.Pipeline exposing (required, optional)
import Json.Encode as Encode

-- Elm convention: camelCase field names in the type alias
type alias User =
    { userId : String
    , username : String
    , email : String
    , score : Int          -- Int not Float for whole numbers
    , isActive : Bool
    , bio : Maybe String
    }

decoder : Decoder User
decoder =
    Decode.succeed User
        |> required "user_id"   Decode.string
        |> required "username"  Decode.string
        |> required "email"     Decode.string
        |> required "score"     Decode.int
        |> required "is_active" Decode.bool
        |> optional "bio"       (Decode.nullable Decode.string) Nothing

-- Encoder (for sending data back to the API)
encode : User -> Encode.Value
encode user =
    Encode.object
        [ ( "user_id",   Encode.string user.userId )
        , ( "username",  Encode.string user.username )
        , ( "email",     Encode.string user.email )
        , ( "score",     Encode.int user.score )
        , ( "is_active", Encode.bool user.isActive )
        , ( "bio",       Maybe.withDefault Encode.null (Maybe.map Encode.string user.bio) )
        ]

Using the Decoder in The Elm Architecture (HTTP)

module Main exposing (..)

import Browser
import Html exposing (Html, div, h2, p, text)
import Http
import User exposing (User)

type Model
    = Loading
    | Success User
    | Failure String

type Msg
    = GotUser (Result Http.Error User)

init : () -> ( Model, Cmd Msg )
init _ =
    ( Loading
    , Http.get
        { url = "https://api.example.com/users/usr_4421"
        , expect = Http.expectJson GotUser User.decoder
        }
    )

update : Msg -> Model -> ( Model, Cmd Msg )
update msg _ =
    case msg of
        GotUser (Ok user) ->
            ( Success user, Cmd.none )

        GotUser (Err err) ->
            ( Failure (Debug.toString err), Cmd.none )

view : Model -> Html Msg
view model =
    case model of
        Loading ->
            p [] [ text "Loading..." ]

        Success user ->
            div []
                [ h2 [] [ text user.username ]
                , p  [] [ text ("Score: " ++ String.fromInt user.score) ]
                , p  [] [ text (Maybe.withDefault "No bio" user.bio) ]
                ]

        Failure err ->
            p [] [ text ("Error: " ++ err) ]

Decoding Nested Objects and Arrays

-- Nested object: use Decode.map or a nested Pipeline decoder
type alias Address =
    { street : String
    , city : String
    }

addressDecoder : Decoder Address
addressDecoder =
    Decode.succeed Address
        |> required "street" Decode.string
        |> required "city"   Decode.string

type alias UserWithAddress =
    { username : String
    , address  : Address
    }

userWithAddressDecoder : Decoder UserWithAddress
userWithAddressDecoder =
    Decode.succeed UserWithAddress
        |> required "username" Decode.string
        |> required "address"  addressDecoder   -- nested decoder

-- Array of objects
usersDecoder : Decoder (List User)
usersDecoder =
    Decode.list User.decoder

-- Decode a field whose value is an array
tagsDecoder : Decoder (List String)
tagsDecoder =
    Decode.field "tags" (Decode.list Decode.string)

Frequently Asked Questions

Why does Elm require explicit decoders instead of automatic deserialization? Elm's compiler guarantees no runtime exceptions. Automatic deserialization would require trusting that JSON matches the expected shape — but APIs return unexpected data. Explicit decoders force you to handle every possible failure path at compile time, which is why Elm programs are famously crash-free in production.

What's the difference between required, optional, and Decode.nullable? required "key" decoder fails if the key is missing. optional "key" decoder default uses the default value if the key is absent. Decode.nullable decoder handles JSON null — it returns Maybe a. Combine them: optional "bio" (Decode.nullable Decode.string) Nothing handles both absent and null.

Does the generator use Float or Int for numbers? The generator uses Float as a safe default. Change whole-number fields (score, age, count) to Int and use Decode.int in the decoder. Elm's type system will catch any mismatch between the type alias and the decoder at compile time.

Is my JSON sent to a server? No. TypeMorph runs entirely in your browser — none of your data leaves your machine.