Skip to main content

Layouts

Shells and page layouts for guides, references, and wide product review surfaces.

On this page

docsDocument

Render the complete branded document shell with navigation, assets, themes, metadata, and canonical URLs.

docsDocument
let documentPage =
    docsArticle "overview" "Acme Docs" "Build and ship with typed documentation." [
        docsSection "welcome" "Welcome" [ docsParagraph "Choose a guide to get started." ] ]

let documentHtml =
    docsDocument exampleSite documentPage
    |> Render.toHtmlDocString

docsArticle

Use the article layout for guides and conceptual documentation with a readable content column and table of contents.

docsArticle
let articlePage =
    docsArticle "guide" "Getting started" "Build your first integration." [
        docsSection "install" "Install" [
            docsParagraph "Add the package to your application."
            docsCode "shell" "dotnet add package Acme" ] ]

docsReference

Keep endpoint documentation beside request and response examples in a dedicated reference composition.

docsReference
let referencePage =
    docsReference "customers" "Create a customer" "Customer API reference." [
        docsSection "endpoint" "Endpoint" [
            docsCustom (docsApiEndpoint POST "/v1/customers" "Creates a customer.") ]
        docsSection "parameters" "Parameters" [
            docsCustom (docsParameters [
                docsParameter "email" "string" true "Customer email address." ]) ] ]
        (docsRail (docsCodeExample "Request" "curl" "curl -X POST /v1/customers"))

docsCanvas

Use a wide canvas for product frames, workflow states, and architecture diagrams; hide only the visual heading when the framed product already supplies one.

docsCanvas
let canvasPage =
    docsCanvas "create-view" "Create a view" "Review the complete workflow." [
        docsSection "states" "States" [
            docsCustom (docsStateTabs "view-states" "View states" [
                { id = "ready"; label = "Ready"; content = productScreen "ready" }
                { id = "validation"; label = "Validation"; content = productScreen "validation" } ]) ]
        docsSection "sequence" "Sequence" [ docsSequence (sequence ()) ] ]