JSON to Elm Converter Online

Generate Elm type alias records and matching JSON decoders from any payload — uses elm/json and the pipeline package. 100% in your browser.

Input JSON

Elm Output

What is a JSON to Elm converter?

A JSON to Elm converter reads a JSON sample and emits both the matching type alias record and a Json.Decode.Decoder for that type. Elm requires both — the type for compile-time safety and the decoder so the runtime can validate that incoming JSON actually matches the expected shape. The output uses the popular pipeline package for ergonomic chaining.

Hand-writing Elm decoders is the friction point most newcomers hit — every field needs a |> required "name" Json.Decode.string entry. OpenFormatter walks the JSON tree once, generates both the type and the decoder, and runs entirely in your browser so internal API responses never leave your machine.

How to generate Elm types and decoders from JSON — 4 steps

Paste a representative JSON response. Type inference reads the first observed value of each field — booleans must be true/false, numbers must be unquoted.
Click Convert. The tool emits a Generated module with type aliases and pipeline-style decoders.
Install elm/json and the pipeline package. elm install elm/json and elm install NoRedInk/elm-json-decode-pipeline.
Decode incoming JSON. Json.Decode.decodeString rootDecoder json returns Result Error Root — pattern-match in your update function.

JSON to Elm example

Sample JSON

{
  "id": 42,
  "name": "Ada Lovelace",
  "active": true
}

Generated Elm

module Generated exposing (..)

import Json.Decode
import Json.Decode.Pipeline


type alias Root =
    { id : Int
    , name : String
    , active : Bool
    }


rootDecoder : Json.Decode.Decoder Root
rootDecoder =
    Json.Decode.succeed Root
        |> Json.Decode.Pipeline.required "id" Json.Decode.int
        |> Json.Decode.Pipeline.required "name" Json.Decode.string
        |> Json.Decode.Pipeline.required "active" Json.Decode.bool

Type + decoder pair

Each generated type comes with a matching decoder using the pipeline syntax — exactly what idiomatic Elm production code looks like.

Nested types

Every nested JSON object becomes its own type alias and decoder. Order is emitted so child types appear before parent references.

Client-Side Only

JSON is parsed in JavaScript inside the browser. Internal API responses, tokens, or PII never reach a server.

Common use cases

check_circleBootstrapping decoders for a single-page Elm app consuming a REST API
check_circleModelling Elm UI Msg payloads that contain JSON from third-party services
check_circleGenerating decoders for GraphQL response shapes when elm-graphql is overkill
check_circleModelling websocket message payloads in an elm-spa app
check_circleDecoding analytics or telemetry events received via Ports from JS
check_circleParsing third-party SDK callback payloads (Stripe, Auth0) inside an Elm shell
check_circleModelling configuration files (config.json) loaded at app start
check_circleBuilding a typed API client wrapper around an existing JS XHR helper

Why client-side generation matters

The JSON you paste often contains real customer data, OAuth tokens, signed URLs, or internal field names you do not want indexed by a third-party converter. OpenFormatter generates the Elm entirely in JavaScript on your device — open the Network tab in DevTools and you will see zero requests when you click Convert. Safe for enterprise use, safe behind a corporate proxy, safe when the API contract is itself confidential.

Need other functional-language tooling?

Generate Haskell data types, TypeScript interfaces, or browse other JSON converters — all browser-side.

JSON to Haskell JSON to TypeScript All JSON Tools

Frequently Asked Questions

What is Elm?

Elm is a strongly-typed functional language that compiles to JavaScript and is purpose-built for front-end web applications. It is famous for "no runtime exceptions" — the type system catches every malformed value at compile time. Elm enforces explicit JSON decoders so you cannot accidentally trust an external payload, which is why a converter that produces both the type and the decoder is so useful.

How do JSON decoders work in Elm?

In Elm, parsing JSON is a two-step process: parse the raw string into a Json.Decode.Value, then run a Decoder MyType against it. Decoders are first-class values you compose — Json.Decode.string, Json.Decode.int, Json.Decode.field "name" Json.Decode.string. The pipeline package (NoRedInk/elm-json-decode-pipeline) provides |> Json.Decode.Pipeline.required for ergonomic chaining, which is the style used by this generator.

Which packages do I need installed?

elm install elm/json (built-in for stdlib decoders) and elm install NoRedInk/elm-json-decode-pipeline (for the pipeline syntax used by the generator). Both are battle-tested core packages used by virtually every Elm production application.

How are nested objects handled?

Each nested JSON object becomes its own type alias plus its own decoder. The parent type references the child type by name, and the parent decoder calls the child decoder via the pipeline syntax: |> required "address" addressDecoder. The order is emitted so that nested types/decoders appear before their referencing parents — Elm requires this.

How are arrays handled?

A JSON array becomes List T in Elm. The decoder uses Json.Decode.list innerDecoder. For nested object lists, the inner decoder is the generated decoder for the child type. For mixed-type arrays use Json.Decode.value or write a custom decoder using Json.Decode.oneOf.

How do nullable fields work?

Wrap the field type in Maybe, e.g. Maybe String, and use Json.Decode.nullable. The generator emits non-Maybe types based on the sample (since the field was present); when you know a field is sometimes null or missing, change the type to Maybe T and the decoder to Json.Decode.nullable T or use Json.Decode.Pipeline.optional.

Is the JSON uploaded to your servers?

No. Conversion runs entirely in your browser via JavaScript. Open DevTools → Network and click Convert — no requests are made. Pasting JSON containing tokens or proprietary data never leaves your machine.

How do I use the generated decoder?

Pipe the decoder into Json.Decode.decodeString — Json.Decode.decodeString rootDecoder jsonString returns Result Json.Decode.Error Root. Pattern-match on Ok value or Err error in your update function. The error includes the failing path so debugging unexpected payloads is straightforward.