HTMX is for everyone

Wed Mar 6 2024

Lukas Werner

TL:DR;

HTMX is a technology that is platform agnostic.


For some reason when I talk to people about HTMX, Golang always is comes up, which is cool but really misses the point of what HTMX is.

HTMX is a way to describe hypermedia applications.

https://hypermedia.systems/extending-html-as-hypermedia/

(not a direct quote but the gist)

What makes HTMX so incredible is that it is just like HTML, it just is markup. That means that it can be “rendered” on any server using any tech.

Want to write your server in Python, Ruby, Elixir, Rust, heck even JavaScript? YOU CAN DO IT!

Limiting HTMX’s public discourse to only Golang is only limiting the growth of this really powerful idea.

Yes I’m willing to admit that I am partially responsible for this as I love using Golang for everything I build. However, I will defend that blog post, I was learning HTMX in my favorite tech stack. AND SO SHOULD YOU!

from flask import Flask

app = Flask(__name__)

@app.route("/alert")
def alerter():
    return "<h1>Hello!</h1>"

@app.route("/")
def hello_world():
    return """<script src="https://unpkg.com/[email protected]"></script>
    <button hx-get="/alert" hx-swap="outerHTML">Hi</button>
    """

if __name__ == "__main__":
    app.run(debug=True)

I find that python is just as easy to write these HTMX apps in as Golang. Granted the syntax highlighting isn’t as good as templ, but it is pretty nice developer experience. The same goes for vanilla JavaScript. I know the whole point was to reduce the JS we are writing but hear me out: it doesn’t matter. HTMX doesn’t care. Just please make sure that you have a reasonable response time for your server.)

const express = require("express");
const app = express();
const port = 3000;

app.get("/alert", (req, res) => {
  res.send(`<h1>Hello!</h1>`);
});

app.get("/", (req, res) => {
  res.send(`<script src="https://unpkg.com/[email protected]"></script>
    <button hx-get="/alert" hx-swap="outerHTML">Hi</button>`);
});

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`);
});

I wont keep re-writing these examples as I think it should be clear enough. HTMX is for everyone, just send your HTML snippets on specific routes and ta-da! You have a dynamic modern web app!