HTMX tutorial

How htmx helps you stay away from React, Angular and SPA frameworks

Girish Venkatachalam

Mar 08, 2024

What is htmx?

The name might sound as though it is from w3c. No it is not. It is from the bazaar, not cathedral(not the big boys).

That is exactly what makes it really cool. Anything from the standards guys , the RFC authors is going to suck.

So what is this ballyhoo about?

Let me explain.

HTMX is a HTML focused evolution of sorts , an effort taken to make HTML do the things we do today with JSON and SPA frameworks.

Let me illustrate with an example.

Say you want to fetch a piece of info from the web server using Ajax on button click. Or fill up a form and show some result on the browser, say after the DB saves your form values.

How to achieve it?

You package the HTML form element input field, select, textarea or file input values and upload using application/json or application/x-www-form-urlencoded MIME and send on wire.

Server side code written in go, Python flask or node.js decodes , does DB INSERT query , returns JSON.

Browser HTML interprets JSON and displays values.

This is what HTMX attempts to FIX.

The XML part of Ajax now in JSON avatar is thrown away and you stay within HTML to do all the work.

In addition you also can do CSS, some animations, search and so on without a single line of JS.

I know you don’t believe,so read on.

What is wrong with SPA?

Alright, so you say you install a shitload of third party dependencies using Angular , React or Vue with yarn and npm.

Now what?

You have to add node_modules to .gitignore and you have to resort to some packaging tool like vite.

In one fell swoop you throw away all that. How about that?

Why dump JavaScript?

JS does not come with good friends, moreover you don’t need complex state tracking, reactivity, closure and callback hell.

Enough said.

No JSON

Let us look further.

JSON is how we have lived so far. We have analyzed it thread bare before. But not using it definitely feels cool.

Sample code

 <div hx-swap-oob="beforeend:#content">
        <p>{time}: {message}</p>
  </div>

This one does websockets using flask.

More code.

templates/index.html

<!DOCTYPE html>
<html>
  <head>
    <!-- include htmx -->
    <script
      src="https://unpkg.com/htmx.org@1.6.0"
      crossorigin="anonymous"
    ></script>
  </head>

  <body>
    <h1>HTMLX websockets sample</h1>

    <!-- websocket connection -->
    <div hx-ws="connect:/ws">
      <!-- input for new messages, send a message to the backend
      via websocket -->
      <form hx-ws="send:submit">
        <input name="chat_message" />
      </form>
    </div>

    <!-- location for new messages from the server -->
    <div id="content"></div>

  </body>
</html>

main.py

import time

from fastapi import FastAPI, Request, WebSocket
from fastapi.templating import Jinja2Templates

templates = Jinja2Templates(directory="templates")


app = FastAPI()


@app.get("/")
async def get(request: Request):
    return templates.TemplateResponse("index.html", {"request": request})


@app.websocket("/ws")
async def time_handler(websocket: WebSocket):
    await websocket.accept()
    # response content
    content = """
        <div hx-swap-oob="beforeend:#content">
        <p>{time}: {message}</p>
        </div>
    """
    while True:
        msg = await websocket.receive_json()
        await websocket.send_text(
            content.format(time=time.time(), message=msg["chat_message"])
        )

You run this flask app like this.

$ uvicorn main:app

Output on browser at http://localhost:8000

You can do lot of amazing things, this is just a stupid sample, nothing more.

How to escape coding hell?

Some sample methods.

 hx-get
 hx-post
 hx-trigger
 hx-swap
 hx-boost

You obviously know first two. The last 3 are most interesting. Official website has lot of cool docs and a long book. It needs to be filled with code samples but at this time has more English than code.

If you play within htmx ecosystem you can escape JS hell(to a degree).

HTMX, Alpine.js and Tailwind

If you love Alpine.js and Tailwind like I do, you can see it plays well with atomic CSS and a minimalistics framework.

Sky is limit if you want to do things the old new way. HTMX is going back to basics in a sense.

Conclusion

You think, this is so funny, why do things using HTML when you have JS?

There are multiple reasons, some of which are performance, less code, clean well maintained coding avoiding needless overhead.

You can throw away the tooling needed for an SPA framework like sveltekit.

Answer

Fabric.js is the most popular and widely used toolkit for creating drawing applications using the HMTL5 canvas element.

I use it as the bottom layer for my Micro SaaS product photoveda.

Question

What is wrong with React?

Feedback

If you feel like it, please share this tech focused newsletter with friends and family.

I send this daily and is filled with code samples and demos.