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
https://docs.example.test
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.toHtmlDocStringdocsArticle
Use the article layout for guides and conceptual documentation with a readable content column and table of contents.
docsArticle
https://docs.example.test/guide
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
https://docs.example.test/customers
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
https://docs.example.test/create-view
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 ()) ] ]