Creating a layout via F#, is the recommended way when working on complex layout or releasing it as an NPM package.

  • Create a folder to host your code Nacara.Layout.Custom.

    mkdir Nacara.Layout.Custom && cd Nacara.Layout.Custom
  • Create an FSharp project Nacara.Layout.Custom.fsproj

    dotnet new library -lang f#
  • Add Nacara.Core to your project

    dotnet add package Nacara.Core

    By default you have access to Fable.React, if you prefer Feliz you can add it

    dotnet add package Feliz
  • Change Library.fs content to:

    module Layout
    open Fable.Core.JsInterop
    open Nacara.Core.Types
    open Fable.React
    open Fable.React.Props
    // Your render function, it is responsible to transform a page into HTML
    let render (rendererContext : RendererContext) (pageContext : PageContext) =
        promise {
            let! pageContent =
            return div [ ]
                    str "Hello, from your custom layout"
                    br [ ]
                    div [ DangerouslySetInnerHTML { __html = pageContent} ]
                        [ ]
    // This is how we expose layouts to Nacara
            Renderers = [|
                    Name = "my-layout"
                    Func = render
            Dependencies = [| |]
  • Compile your project to JavaScript using Fable.

    If you don't have Fable installed in your project you need to install it:

    dotnet new tool-manifest
    dotnet tool install fable

    Launch the compilation:

    dotnet fable --outDir dist --watch
  • Register your layout in the nacara.config.json

        // ...
        "layouts": [

You can find type documentation in the API section.

Here are the most important topics when working with custom layouts: