Htmx and F#

jkone27

3 min readJul 5, 2023

fun with hypermedia and F# lang

F# — fsharp

If you don’t know what F# is, have a look here.

An open-source language that makes it easy to write succinct, robust, and performant code. — src

Environment Setup

brew install dotnet

dotnet fsi
> "hello";;
> #quit;;

More info on F# in general, and why it’s great for HTML (hence HTMX), and here.

HTMX

htmx is a library that allows you to access modern browser features directly from HTML, rather than using javascript. — src

htmx extends and generalizes the core idea of HTML as a hypertext, opening up many more possibilities directly within the language:
Now any element, not just anchors and forms, can issue an HTTP request
Now any event, not just clicks or form submissions, can trigger requests
Now any HTTP verb, not just GET and POST, can be used
Now any element, not just the entire window, can be the target for update by the request
Note that when you are using htmx, on the server side you typically respond with HTML, not JSON. This keeps you firmly within the original web programming model, using Hypertext As The Engine Of Application State without even needing to really understand that concept.
(src)

Let’s Code Now

Now use the editor of your choice, and create a test-htmx.fsx file, to most of you, probably using Ionide and VsCode is the best setup, so I suggest having that as default for any platform.

Once this is done, paste the code below into your file.

If all is setup correctly your editor should recognise this as a valid F# file and provide you with IntelliSense and a REPL.

F# source code available as public Gist

Running on Suave

Now you can open a terminal, and execute your fsx script via dotnet fsi <yourscript>.fsx and run the Suave webserver powering the script, aspnetcore and other alternatives using Microsoft Kestrel server are possible if you are looking for performance.

serving the script via Suave.io web server

HTML results

After clicking our <button>, the server populates our #result HTML div container together with the htmx library, the server content is not JSON, is simple HTML.

A nice unordered list container <ul></ul> shows, as we wanted from our server code on the GET verb for the /clicked route.

Here is the HTTP server request-response interaction as tracked by Chrome developer tools.

This also didn’t cause a full client page refresh at all, in a similar but smarter fashion than the “old” AJAX Post requests, but extending the concept to all HTTP Verbs, in our case this is a GET.

This beautiful HTTP meta framework turns HTTP into a fully capable beast! Could it be that SPA and React are not the answer anymore?

More complex use cases can be done through HyperScript within htmx itself, so without leaving the markup!

Below is a WIP for an HTMX F# TODOMVC app using Feliz.ViewEngine.Htmx above and Saturn + Aspnetcore, instead of Suave.io, for the backend in a single .fsx script!

todo-mvc-feliz-htmx/program.fsx at main · jkone27/todo-mvc-feliz-htmx

explore data. Contribute to jkone27/todo-mvc-feliz-htmx development by creating an account on GitHub.

github.com

Don’t forget to have fun () -> “with htmx!” .