Build your first view

Create a typed HTML view, render it as a fragment or complete document, and reuse ordinary F# values as components.

On this page

Overview

Create a typed HTML view, render it as a fragment or complete document, and reuse ordinary F# values as components.

Create the view

open FSharp.ViewEngine
open type Html

let greeting name =
    main {
        _class "content"
        h1 { $"Hello, {name}!" }
        p { "Built with typed F# computation expressions." }
    }

Render the view

Use Render.toString for a fragment. Use Render.toHtmlDocString when the root is a complete html element and the response needs a doctype.

let fragment = greeting "Ada" |> Render.toString

let document =
    html {
        _lang "en"
        head { title "Greeting" }
        body { greeting "Ada" }
    }
    |> Render.toHtmlDocString

Reuse components

A component is an ordinary function that returns an HtmlElement. Compose it directly inside another builder without a template runtime or component base class.

let badge label = span { _class "badge"; label }

div {
    badge "Typed"
    badge "Composable"
}

Continue with Elements and attributes to learn the core DSL.

Build your first view

Overview

Create the view

Render the view

Reuse components

Next