Fable, Elmish and Frontend F#

Ecosystem: Feliz (React DSL), Fable.Lit, Sutil (Svelte-like), Fable.Remoting, Thoth.Json (JSON on both client and server), and Fable.Python. JS interop uses [<Import>], emitJsExpr, and Fable.Core.JsInterop.

// Fable compiles F# to JavaScript (also TypeScript, Python, Rust, Dart targets)
// Elmish: the Model-View-Update (MVU) architecture, with Feliz for React views
module App

open Elmish
open Elmish.React
open Feliz

type Model = { Count: int; Name: string }

type Msg =
    | Increment
    | Decrement
    | SetName of string

let init () = { Count = 0; Name = "" }, Cmd.none

let update msg model =
    match msg with
    | Increment -> { model with Count = model.Count + 1 }, Cmd.none
    | Decrement -> { model with Count = model.Count - 1 }, Cmd.none
    | SetName n -> { model with Name = n }, Cmd.none

let view model dispatch =
    Html.div [
        Html.h1 $"Count: {model.Count}"
        Html.button [ prop.onClick (fun _ -> dispatch Decrement); prop.text "-" ]
        Html.button [ prop.onClick (fun _ -> dispatch Increment); prop.text "+" ]
        Html.input [ prop.value model.Name; prop.onChange (SetName >> dispatch) ]
        Html.p $"Hello, {model.Name}"
    ]

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

dotnet tool install fable
dotnet fable src --run npx vite        # compile and serve with Vite
dotnet new SAFE                        # full-stack template (Saturn/Giraffe + Fable + Elmish)