Convert Elm to F#

Convert Elm code to idiomatic F#. This skill extends

meta-convert-dev

This Skill Extends

• meta-convert-dev

  - Foundational conversion patterns (APTV workflow, testing strategies)

For general concepts like the Analyze → Plan → Transform → Validate workflow, testing strategies, and common pitfalls, see the meta-skill first.

This Skill Adds

• Type mappings: Elm types → F# types
• Idiom translations: Elm patterns → idiomatic F#
• Error handling: Elm Result/Maybe → F# Result/Option
• Architecture: The Elm Architecture (TEA) → F# Elmish or MVU patterns
• Functional patterns: Pure functions, immutability preserved in F#

This Skill Does NOT Cover

• General conversion methodology - see

  meta-convert-dev

• Elm language fundamentals - see

  lang-elm-dev

• F# language fundamentals - see

  lang-fsharp-dev

• Reverse conversion (F# → Elm) - see

  convert-fsharp-elm

• F# web frameworks in depth - see framework-specific skills

Quick Reference

String

string

Int

int

Float

float

Bool

bool

List a

'a list

Array a

'a array

Maybe a

'a option

Result error value

Result<'value, 'error>

type alias

type

type

type

Cmd msg

Async<'msg>

Cmd<'msg>

Sub msg

Html msg

ReactElement

When Converting Code

1. Analyze source thoroughly before writing target
2. Map types first - Elm and F# type systems are very similar
3. Preserve functional purity - both languages emphasize immutability
4. Adopt F# idioms - leverage .NET libraries and computation expressions
5. Handle The Elm Architecture - map to Elmish or custom MVU implementation
6. Test equivalence - same inputs → same outputs

Type System Mapping

Primitive Types

String

string

Int

int

Float

float

float

double

Bool

bool

Char

char

()

unit

never

Collection Types

List a

'a list

Array a

'a array

Set a

Set<'a>

Dict k v

Map<'k, 'v>

Dictionary<'k,'v>

Tuple

(a, b)

Composite Types

type alias

type

type Person = { Name: string; Age: int }

type

type

type Email = Email of string

Option/Maybe Types

Maybe a

'a option

Some

Just

None

Nothing

Just x

Some x

Nothing

None

Maybe.withDefault

Option.defaultValue

Maybe.map

Option.map

Maybe.andThen

Option.bind

Result Types

Result error value

Result<'value, 'error>

Ok value

Ok value

Err error

Error error

Error

Err

Result.map

Result.map

Result.andThen

Result.bind

Result.withDefault

Result.defaultValue

Critical Note: Elm's

Result error value

Result<'T, 'TError>

Generic Type Parameters

a

b

c

'a

'b

'c

comparable

'a when 'a : comparison

number

^a when ^a : (static member (+) : ^a * ^a -> ^a)

appendable

Idiom Translation

Pattern 1: Maybe/Option Handling

Elm:

type alias User =
    { name : String
    , email : Maybe String
    }

getUserEmail : User -> String
getUserEmail user =
    Maybe.withDefault "No email" user.email

findUser : Int -> List User -> Maybe User
findUser id users =
    List.filter (\u -> u.id == id) users
        |> List.head

F#:

type User = {
    Name: string
    Email: string option
}

let getUserEmail (user: User) : string =
    user.Email |> Option.defaultValue "No email"

let findUser (id: int) (users: User list) : User option =
    users |> List.tryFind (fun u -> u.Id = id)

Why this translation:

• Maybe

  →

  option

  is a direct semantic mapping

• Just

  →

  Some

  ,

  Nothing

  →

  None

• Maybe.withDefault

  →

  Option.defaultValue

• List.head : List a -> Maybe a

  →

  List.tryFind

  or

  List.tryHead

• F# has richer

  Option

  module with more combinators

Pattern 2: Result/Error Handling

Elm:

type alias Error = String

parseAge : String -> Result Error Int
parseAge str =
    case String.toInt str of
        Just age ->
            if age >= 0 then
                Ok age
            else
                Err "Age must be non-negative"
        Nothing ->
            Err "Not a valid integer"

validateUser : String -> String -> Result Error User
validateUser name ageStr =
    parseAge ageStr
        |> Result.andThen (\age -> Ok { name = name, age = age })

F#:

type Error = string

let parseAge (str: string) : Result<int, Error> =
    match System.Int32.TryParse(str) with
    | true, age when age >= 0 ->
        Ok age
    | true, _ ->
        Error "Age must be non-negative"
    | false, _ ->
        Error "Not a valid integer"

let validateUser (name: string) (ageStr: string) : Result<User, Error> =
    parseAge ageStr
    |> Result.bind (fun age -> Ok { Name = name; Age = age })

Why this translation:

• Result error value

  (Elm) →

  Result<'value, 'error>

  (F#) - note reversed type parameters

• Ok

  /

  Err

  →

  Ok

  /

  Error

• Result.andThen

  →

  Result.bind

• F# uses

  TryParse

  pattern for parsing (returns tuple

  bool * value

  )
• Both support railway-oriented programming with bind/map

Pattern 3: Union Types and Pattern Matching

Elm:

type Msg
    = Increment
    | Decrement
    | SetValue Int
    | Reset

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

        Decrement ->
            { model | count = model.count - 1 }

        SetValue n ->
            { model | count = n }

        Reset ->
            { model | count = 0 }

F#:

type Msg =
    | Increment
    | Decrement
    | SetValue of int
    | Reset

let update (msg: Msg) (model: Model) : Model =
    match msg with
    | Increment ->
        { model with Count = model.Count + 1 }

    | Decrement ->
        { model with Count = model.Count - 1 }

    | SetValue n ->
        { model with Count = n }

    | Reset ->
        { model with Count = 0 }

Why this translation:

• Discriminated unions are nearly identical
• Elm:

  Type arg

  → F#:

  Type of arg

• Record update syntax:

  { model | field = value }

  →

  { model with Field = value }

• Pattern matching syntax is nearly identical
• F# requires explicit

  of

  keyword for union cases with data

Pattern 4: List Operations

Elm:

users : List User
users =
    [ { name = "Alice", age = 30 }
    , { name = "Bob", age = 25 }
    ]

activeUsers : List User -> List User
activeUsers =
    List.filter .active
        >> List.map .name
        >> List.sort

totalAge : List User -> Int
totalAge users =
    List.foldl (\user sum -> sum + user.age) 0 users

F#:

let users: User list =
    [ { Name = "Alice"; Age = 30 }
      { Name = "Bob"; Age = 25 } ]

let activeUsers: User list -> string list =
    List.filter (fun u -> u.Active)
    >> List.map (fun u -> u.Name)
    >> List.sort

let totalAge (users: User list) : int =
    users |> List.fold (fun sum user -> sum + user.Age) 0

Why this translation:

• List syntax nearly identical:

  [ items ]

• Function composition:

  >>

  in both languages

• List.foldl

  →

  List.fold

  (F# fold is left-associative by default)
• F# has more list functions (

  List.sumBy

  ,

  List.groupBy

  , etc.)
• Record access:

  .field

  →

  (fun r -> r.Field)

  or use lambda

Pattern 5: The Elm Architecture (TEA) → F# Elmish

Elm:

type alias Model =
    { count : Int }

type Msg
    = Increment
    | Decrement

init : ( Model, Cmd Msg )
init =
    ( { count = 0 }, Cmd.none )

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        Increment ->
            ( { model | count = model.count + 1 }, Cmd.none )

        Decrement ->
            ( { model | count = model.count - 1 }, Cmd.none )

view : Model -> Html Msg
view model =
    div []
        [ button [ onClick Decrement ] [ text "-" ]
        , text (String.fromInt model.count)
        , button [ onClick Increment ] [ text "+" ]
        ]

F# (using Elmish):

open Elmish

type Model = { Count: int }

type Msg =
    | Increment
    | Decrement

let init () : Model * Cmd<Msg> =
    { Count = 0 }, Cmd.none

let update (msg: Msg) (model: Model) : Model * Cmd<Msg> =
    match msg with
    | Increment ->
        { model with Count = model.Count + 1 }, Cmd.none

    | Decrement ->
        { model with Count = model.Count - 1 }, Cmd.none

let view (model: Model) (dispatch: Msg -> unit) =
    div [] [
        button [ OnClick (fun _ -> dispatch Decrement) ] [ str "-" ]
        str (string model.Count)
        button [ OnClick (fun _ -> dispatch Increment) ] [ str "+" ]
    ]

Why this translation:

• Elmish is F#'s implementation of The Elm Architecture
• Model, Msg, init, update, view pattern is identical

• Cmd

  type is similar but uses F# async under the hood
• View function receives

  dispatch

  explicitly in F#

• Html msg

  →

  ReactElement

  (via Fable.React)

Pattern 6: JSON Decoding

Elm:

import Json.Decode as Decode

type alias User =
    { id : Int
    , name : String
    , email : Maybe String
    }

userDecoder : Decode.Decoder User
userDecoder =
    Decode.map3 User
        (Decode.field "id" Decode.int)
        (Decode.field "name" Decode.string)
        (Decode.maybe (Decode.field "email" Decode.string))

F#:

open System.Text.Json
open System.Text.Json.Serialization

type User = {
    [<JsonPropertyName("id")>]
    Id: int

    [<JsonPropertyName("name")>]
    Name: string

    [<JsonPropertyName("email")>]
    Email: string option
}

// Automatic with System.Text.Json or Thoth.Json
let parseUser (json: string) : Result<User, string> =
    try
        JsonSerializer.Deserialize<User>(json) |> Ok
    with ex ->
        Error ex.Message

// Or with Thoth.Json for Elm-style decoders
open Thoth.Json.Net

let userDecoder : Decoder<User> =
    Decode.object (fun get -> {
        Id = get.Required.Field "id" Decode.int
        Name = get.Required.Field "name" Decode.string
        Email = get.Optional.Field "email" Decode.string
    })

Why this translation:

• F# offers two approaches: attribute-based (simpler) or decoder-based (like Elm)
• Thoth.Json provides Elm-style decoders for F#
• System.Text.Json uses attributes and reflection

• Maybe

  fields →

  option

  with proper serialization handling
• F# has more serialization libraries available (.NET ecosystem)

Error Handling

Elm's Error Model

Elm guarantees no runtime exceptions through its type system:

• All errors are encoded in types (

  Maybe

  ,

  Result

  )
• Impossible states are made impossible via union types
• Compiler enforces exhaustive pattern matching

F#'s Error Model

F# has multiple error handling approaches:

1. Option/Result types (recommended for Elm migrations)
2. Exceptions (for interop with .NET libraries)
3. Computation expressions (for error workflows)

Migration Strategy

Preserve Elm's error safety:

// Use Result for expected errors
type ValidationError =
    | EmptyName
    | InvalidEmail
    | AgeTooYoung

let validateUser name email age : Result<User, ValidationError> =
    if String.IsNullOrWhiteSpace(name) then
        Error EmptyName
    elif not (email.Contains("@")) then
        Error InvalidEmail
    elif age < 18 then
        Error AgeTooYoung
    else
        Ok { Name = name; Email = email; Age = age }

// Chain validations
let createUser name email age =
    result {
        let! validatedUser = validateUser name email age
        let! savedUser = saveToDatabase validatedUser
        return savedUser
    }

Handle .NET exceptions when necessary:

// Wrap .NET APIs that throw exceptions
let safeParse (str: string) : Result<int, string> =
    try
        int str |> Ok
    with
    | :? System.FormatException -> Error "Invalid format"
    | :? System.OverflowException -> Error "Number too large"
    | ex -> Error ex.Message

Concurrency Patterns

Elm: Cmd and Tasks

Elm uses

Cmd

Task

type Msg
    = GotUsers (Result Http.Error (List User))

fetchUsers : Cmd Msg
fetchUsers =
    Http.get
        { url = "https://api.example.com/users"
        , expect = Http.expectJson GotUsers usersDecoder
        }

F#: Async and Elmish Commands

F# uses

Async<'T>

Cmd<'Msg>

type Msg =
    | GotUsers of Result<User list, string>

let fetchUsers : Cmd<Msg> =
    Cmd.OfAsync.perform
        (fun () -> async {
            let! response = Http.get "https://api.example.com/users"
            return! parseUsers response
        })
        ()
        (fun users -> GotUsers (Ok users))
        (fun ex -> GotUsers (Error ex.Message))

// Or with computation expression
let fetchUsersAsync () : Async<Result<User list, string>> =
    async {
        try
            let! response = Http.AsyncGet("https://api.example.com/users")
            let! users = parseUsersAsync response
            return Ok users
        with ex ->
            return Error ex.Message
    }

Why this translation:

• Cmd msg

  →

  Cmd<'msg>

  (Elmish)

• Task

  →

  Async<'T>

  (F# async workflow)
• Elmish provides helpers like

  Cmd.OfAsync.perform

• F# async is more powerful but requires explicit error handling

Common Pitfalls

1. Type Parameter Order in Result

   • Elm:

     Result error value

     (error first)
   • F#:

     Result<'value, 'error>

     (value first)
   • Always double-check when converting Result types!

2. Constructor Names

   • Elm:

     Just

     ,

     Nothing

     ,

     Err

   • F#:

     Some

     ,

     None

     ,

     Error

   • Remember to rename when converting

3. Record Update Syntax

   • Elm:

     { model | field = value }

   • F#:

     { model with Field = value }

   • Different keywords:

     |

     vs

     with

4. Union Case Syntax

   • Elm:

     Type arg

   • F#:

     Type of arg

   • F# requires

     of

     keyword

5. List vs Array Performance

   • Both Elm and F#

     list

     are immutable linked lists
   • F# also has mutable

     array

     for performance-critical code
   • Prefer

     list

     for Elm semantics, consider

     array

     for hot paths

6. Module Qualification

   • Elm:

     List.map

     ,

     String.toInt

   • F#:

     List.map

     ,

     System.Int32.Parse

   • F# may require fully qualified names for .NET types

7. Null Safety

   • Elm: No null, ever
   • F#:

     null

     exists for .NET interop
   • Use

     Option.ofObj

     to convert nullable .NET values to

     option

8. Capitalization Conventions

   • Elm: camelCase for everything except types
   • F#: PascalCase for types and record fields, camelCase for values
   • Must rename fields when converting records

Tooling

Examples

Example 1: Simple - Type and Function

Before (Elm):

type alias Point =
    { x : Float
    , y : Float
    }

distance : Point -> Point -> Float
distance p1 p2 =
    let
        dx = p1.x - p2.x
        dy = p1.y - p2.y
    in
    sqrt (dx * dx + dy * dy)

After (F#):

type Point = {
    X: float
    Y: float
}

let distance (p1: Point) (p2: Point) : float =
    let dx = p1.X - p2.X
    let dy = p1.Y - p2.Y
    sqrt (dx * dx + dy * dy)

Example 2: Medium - Union Types and Pattern Matching

Before (Elm):

type Tree a
    = Empty
    | Node a (Tree a) (Tree a)

depth : Tree a -> Int
depth tree =
    case tree of
        Empty ->
            0

        Node _ left right ->
            1 + max (depth left) (depth right)

mapTree : (a -> b) -> Tree a -> Tree b
mapTree f tree =
    case tree of
        Empty ->
            Empty

        Node value left right ->
            Node (f value) (mapTree f left) (mapTree f right)

After (F#):

type Tree<'a> =
    | Empty
    | Node of 'a * Tree<'a> * Tree<'a>

let rec depth (tree: Tree<'a>) : int =
    match tree with
    | Empty ->
        0

    | Node (_, left, right) ->
        1 + max (depth left) (depth right)

let rec mapTree (f: 'a -> 'b) (tree: Tree<'a>) : Tree<'b> =
    match tree with
    | Empty ->
        Empty

    | Node (value, left, right) ->
        Node (f value, mapTree f left, mapTree f right)

Example 3: Complex - The Elm Architecture with HTTP

Before (Elm):

module Main exposing (main)

import Browser
import Html exposing (..)
import Html.Events exposing (onClick)
import Http
import Json.Decode as Decode

type alias Model =
    { users : List User
    , loading : Bool
    , error : Maybe String
    }

type alias User =
    { id : Int
    , name : String
    }

type Msg
    = LoadUsers
    | GotUsers (Result Http.Error (List User))

init : () -> ( Model, Cmd Msg )
init _ =
    ( { users = [], loading = False, error = Nothing }
    , Cmd.none
    )

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        LoadUsers ->
            ( { model | loading = True, error = Nothing }
            , fetchUsers
            )

        GotUsers (Ok users) ->
            ( { model | users = users, loading = False }
            , Cmd.none
            )

        GotUsers (Err error) ->
            ( { model | loading = False, error = Just (errorToString error) }
            , Cmd.none
            )

view : Model -> Html Msg
view model =
    div []
        [ button [ onClick LoadUsers ] [ text "Load Users" ]
        , if model.loading then
            text "Loading..."
          else
            div []
                [ viewError model.error
                , viewUsers model.users
                ]
        ]

viewError : Maybe String -> Html Msg
viewError error =
    case error of
        Just err ->
            div [] [ text ("Error: " ++ err) ]

        Nothing ->
            text ""

viewUsers : List User -> Html Msg
viewUsers users =
    ul [] (List.map viewUser users)

viewUser : User -> Html Msg
viewUser user =
    li [] [ text user.name ]

fetchUsers : Cmd Msg
fetchUsers =
    Http.get
        { url = "https://api.example.com/users"
        , expect = Http.expectJson GotUsers usersDecoder
        }

usersDecoder : Decode.Decoder (List User)
usersDecoder =
    Decode.list userDecoder

userDecoder : Decode.Decoder User
userDecoder =
    Decode.map2 User
        (Decode.field "id" Decode.int)
        (Decode.field "name" Decode.string)

errorToString : Http.Error -> String
errorToString error =
    case error of
        Http.BadUrl url ->
            "Bad URL: " ++ url

        Http.Timeout ->
            "Timeout"

        Http.NetworkError ->
            "Network error"

        Http.BadStatus code ->
            "Bad status: " ++ String.fromInt code

        Http.BadBody message ->
            "Bad body: " ++ message

main =
    Browser.element
        { init = init
        , update = update
        , view = view
        , subscriptions = \_ -> Sub.none
        }

After (F#):

module Main

open Elmish
open Elmish.React
open Fable.React
open Fable.React.Props
open Thoth.Json.Decode
open Fable.SimpleHttp

type Model = {
    Users: User list
    Loading: bool
    Error: string option
}

type User = {
    Id: int
    Name: string
}

type Msg =
    | LoadUsers
    | GotUsers of Result<User list, string>

let init () : Model * Cmd<Msg> =
    { Users = []; Loading = false; Error = None }, Cmd.none

let update (msg: Msg) (model: Model) : Model * Cmd<Msg> =
    match msg with
    | LoadUsers ->
        { model with Loading = true; Error = None }, fetchUsers ()

    | GotUsers (Ok users) ->
        { model with Users = users; Loading = false }, Cmd.none

    | GotUsers (Error error) ->
        { model with Loading = false; Error = Some error }, Cmd.none

let view (model: Model) (dispatch: Msg -> unit) =
    div [] [
        button [ OnClick (fun _ -> dispatch LoadUsers) ] [ str "Load Users" ]
        if model.Loading then
            str "Loading..."
        else
            div [] [
                viewError model.Error
                viewUsers model.Users
            ]
    ]

let viewError (error: string option) =
    match error with
    | Some err ->
        div [] [ str ("Error: " + err) ]
    | None ->
        str ""

let viewUsers (users: User list) =
    ul [] (users |> List.map viewUser)

let viewUser (user: User) =
    li [] [ str user.Name ]

let fetchUsers () : Cmd<Msg> =
    Cmd.OfAsync.perform
        (fun () -> async {
            let! response = Http.get "https://api.example.com/users"
            match response.statusCode with
            | 200 ->
                match Decode.fromString usersDecoder response.responseText with
                | Ok users -> return Ok users
                | Error err -> return Error err
            | code ->
                return Error $"Bad status: {code}"
        })
        ()
        GotUsers
        (fun ex -> GotUsers (Error ex.Message))

let userDecoder : Decoder<User> =
    Decode.object (fun get -> {
        Id = get.Required.Field "id" Decode.int
        Name = get.Required.Field "name" Decode.string
    })

let usersDecoder : Decoder<User list> =
    Decode.list userDecoder

Program.mkProgram init update view
|> Program.withReactSynchronous "root"
|> Program.run

See Also

For more examples and patterns, see:

• meta-convert-dev

  - Foundational conversion patterns with cross-language examples

• lang-elm-dev

  - Elm development patterns and The Elm Architecture

• lang-fsharp-dev

  - F# development patterns and functional programming

• patterns-concurrency-dev

  - Async patterns across languages

• patterns-serialization-dev

  - JSON handling across languages