FSharp.ViewEngine

A minimal, fast view engine for F# that combines the best ideas from several F# view engines. Inspired by Giraffe.ViewEngine, Feliz.ViewEngine, Oxpecker.ViewEngine, and Bolero.

On this page

Overview

A minimal, fast view engine for F# that combines the best ideas from several F# view engines. Inspired by Giraffe.ViewEngine, Feliz.ViewEngine, Oxpecker.ViewEngine, and Bolero.

Design

FSharp.ViewEngine uses computation expressions (like Oxpecker.ViewEngine and Bolero) to build elements. Each element takes a Feliz-style single sequence of attributes and children — there are no separate attribute and children lists. Attributes are prefixed with underscore by convention (like Giraffe.ViewEngine, e.g. _class, _id, _dataOn), which produces clean syntax with nice syntax highlighting. The computation expression allows mixed yielding of strings, elements, and attributes in any order, so there is no need for a special _children attribute.

Key Features

Minimal and fast — as lean as possible while remaining expressive and type-safe
Type-safe HTML generation with F#
Built-in support for Datastar, HTMX, Alpine.js, Tailwind CSS, and SVG
Composable and functional approach
No runtime dependencies

Quick Example

open FSharp.ViewEngine
open type Html
open type Datastar
open type TailwindElements

let myPage =
    html {
        _lang "en"
        head {
            title "My App"
            meta { _charset "utf-8" }
            link { _href "/css/tailwind.css"; _rel "stylesheet" }
        }
        body {
            _dataSignals "{showContent: false}"
            _class "bg-gray-100"
            div {
                _class [ "container"; "mx-auto"; "p-4" ]
                h1 {
                    _class [ "text-3xl"; "font-bold"; "text-blue-600"; "mb-4" ]
                    "Welcome!"
                }
                button {
                    _class [ "bg-blue-500"; "text-white"; "px-4"; "py-2"; "rounded" ]
                    _dataOn ("click", "$showContent = !$showContent")
                    "Toggle Content"
                }
                div {
                    _dataShow "$showContent"
                    _style "display: none"
                    _class [ "mt-4" ]
                    "Content loaded with Datastar."
                }
            }
        }
    }
    |> Render.toHtmlDocString

Getting Started

To get started with FSharp.ViewEngine, check out the Installation guide and then build your first view.