open Falco.Markup
open Falco.Htmx
let demo =
_button
[ Hx.get "/click-me"
Hx.swapOuterHtml
Hx.targetCss "#wrapper" ]
[ _text "Reset" ]
Falco.Htmx brings type-safe htmx support to Falco. It provides a complete mapping of all attributes, typed request data and ready-made response modifiers.
Key Features
Idiomatic mapping of htmx attributes (i.e., hx-get, hx-post, hx-target etc.).
Typed access to htmx request headers.
Prepared response modifiers for common use-cases (i.e., HX-location, HX-Push-Url).
Create a self-documenting way to integrate htmx into Falco applications.
Match the specification of htmx as closely as possible, ideally one-to-one.
Provide type safety without over-abstracting.
Getting Started
This guide assumes you have a Falco project setup. If you don't, you can create a new Falco project using the following commands. The full code for this guide can be found in the .
Remove any *.fs files created automatically, create a new file named Program.fs and set the contents to the following:
open Falco
open Falco.Htmx
open Falco.Markup
open Falco.Routing
open Microsoft.AspNetCore.Builder
let bldr = WebApplication.CreateBuilder()
let wapp = bldr.Build()
let endpoints =
[
]
wapp.UseRouting()
.UseFalco(endpoints)
.Run()
Now, let's incorporate htmx into our Falco application. First we'll define a simple route that returns a button that, when clicked, will swap the inner HTML of a target element with the response from a GET request.
let handleIndex : HttpHandler =
let html =
_html [] [
_head [] [
_script [ _src_ HtmxScript.cdnSrc ] [] ]
_body [] [
_h1' "Example: Hello World"
_button
[ Hx.get "/click"
Hx.swapOuterHtml ]
[ _text "Click Me" ] ] ]
Response.ofHtml html
Next, we'll define a handler for the click event that will return HTML from the server to replace the outer HTML of the button.
let handleClick : HttpHandler =
let html =
_h2' "Hello, World from the Server!"
Response.ofHtml html
And lastly, we'll make Falco aware of these routes by adding them to the endpoints list.
let endpoints =
[
get "/" handleIndex
get "/click" handleClick
]
Save the file and run the application:
> dotnet run
Navigate to https://localhost:5001 in your browser and click the button. You should see the text "Hello, World from the Server!" appear in place of the button.
_div [ Hx.get "/example"; Hx.params "*" ] [
_text "Get Some HTML, Including Params" ]
hx-vals
_div [ Hx.get "/example"; Hx.vals """{"myVal": "My Value"}""" ] [
_text "Get Some HTML, Including A Value in the Request" ]
// Or with a dynamic value:
_div [ Hx.get "/example"; Hx.vals "js:{myVal: calculateValue()}" ] [
_text "Get Some HTML, Including a Dynamic Value from Javascript in the Request" ]
hx-confirm
_button [ Hx.delete "/account"; Hx.confirm "Are you sure you wish to delete your account?" ] [
_text "Delete My Account" ]
_div [ Hx.ext "example" ] [
_text "Example extension is used in this part of the tree..."
_div [ Hx.ext "ignore:example" ] [
_text "... but it will not be used in this part." ] ]
hx-headers
_div [ Hx.get "/example"; Hx.headers [ "myHeader", "My Value" ] ] [
_text "Get Some HTML, Including A Custom Header in the Request" ]
// Or to evaluate a dynamic value:
_div [ Hx.get "/example"; Hx.headers ([ "myHeader", "calculateValue()" ], true) ] [
_text "Get Some HTML, Including A Custom Header in the Request" ]
// ^-- produces hx-headers='js:{"myHeader": calculateValue()}'
Falco.Htmx has built-in support for template fragments. This allows you to return only a fragment of a larger HTML document in response to an htmx request, without having to create separate template function for each fragment.
This is supported by the Response.ofFragment function, the hx-swap attribute and optionally the hx-select attribute.
