- The behaviour of the client is declared in markup (HTML/htmx), rather than written in code.
The Giraffe.Htmx project README gives a good overview of htmx:
htmx uses attributes and HTTP headers to attain its interactivity
htmx's homepage gives an example:
<script src="https://firstname.lastname@example.org"></script> <!-- have a button POST a click via AJAX --> <button hx-post="/clicked" hx-swap="outerHTML"> Click Me </button>
The hx-post and hx-swap attributes on this button tell htmx:
"When a user clicks on this button, issue an AJAX request to /clicked, and replace the entire button with the HTML response"
Check out the htmx website for more details.
The Giraffe.Htmx project offers two libraries to make working with htmx easier from Giraffe: Giraffe.Htmx and Giraffe.ViewEngine.Htmx. Giraffe.Htmx makes it easy to read the htmx-specific headers from the HTTP request data available to you in Giraffe, send partial views and add htmx headers to the HTTP response. Giraffe.ViewEngine.Htmx makes it easy to add htmx attributes into the HTML rendered by the Giraffe view engine.
The equivalent of the above code snippet using Giraffe.ViewEngine.Htmx is
button [ _hxPost "/clicked"; _hxSwap HxSwap.OuterHtml ] [ str "Click Me" ]
Giraffe.Htmx is a really interesting addition to the F# web space. I'll certainly be giving it a spin in future. Thanks Daniel for bringing the awesomeness of htmx to Giraffe!