In short, htmx-local = htmx + tiny-request-router + sqlite. You can use it to build webapps that run locally in your browser using nothing but html, css, javascript and sql. You can serve those apps from any static file server.
htmx uses XMLHttpRequest
for all its server requests. The bulk of htmx-local's ~250 lines of code is spent caressing XMLHttpRequest
just right so that instead of sending requests to a server, it runs them against a tiny-request-router
that you can configure to respond however you'd like.
Here's a quick hello world.
<!DOCTYPE html>
<script src="/htmx-local.js"></script>
<script>
const { router } = htmx;
router.get("/", () => "Hello, world!");
</script>
<body hx-get="/" hx-trigger="load">
</body>
First we add a script tag to load htmx-local. Then in the next script tag we pull out the router from htmx, and set it up to respond to GET requests to /
with "Hello, world!". Finally we add the body tag with attributes hx-get='/' and hx-trigger="load". This means "when the page loads, do a GET to '/' and put the results in the body tag". With htmx-local, that GET '/' will run against the router, and the page will display "Hello, world!".
download a release. unzip it somewhere tasteful. cd into the dist directory. get caddy. caddy run --watch
.