Forms & htmx

The problem

You build a form. The user types something. They click submit. The entire page reloads. The scroll position resets. The nav re-renders. For a simple "add item" action, reloading the whole page feels like demolishing a wall to replace a light switch.

This is how the web worked in 1999. You can do better — without writing JavaScript.

Step 1: A traditional form

Here's a form that submits via regular POST:

<form method="post" action="/api/items">
  <input type="text" name="item" placeholder="New item">
  <button type="submit">Add</button>
</form>

This works. The server receives the data, processes it, and returns a full HTML page. But the browser navigates to a new URL, the old page is gone, and the user sees a flash of white.

Step 2: Add one attribute

Now add hx-post:

<form hx-post="/api/items" hx-target="#list" hx-swap="afterbegin">
  <input type="text" name="item" placeholder="New item">
  <button type="submit">Add</button>
</form>

<div id="list">
  <!-- items appear here -->
</div>

The form no longer reloads the page. htmx sends the POST in the background, receives the server's HTML response, and inserts it as the first child of #list. No JavaScript. No fetch(). No React.

<form method="post" action="/api/items">
  <input name="item" placeholder="New item">
  <button>Add</button>
</form>

<!-- Full page reload. Scroll resets.
     User sees flash of white. -->

<form hx-post="/api/items"
      hx-target="#list"
      hx-swap="afterbegin">
  <input name="item" placeholder="New item">
  <button>Add</button>
</form>

<!-- No reload. New item appears instantly.
     Page stays exactly where it was. -->

The mental model

Traditional forms are like demolishing a wall to replace a light switch. htmx is like unscrewing just the switch plate. The server sends back a new switch plate (an HTML fragment), and htmx swaps it into the wall. Everything else stays untouched.

htmx doesn't replace your server rendering. It enhances it. The server still generates HTML — htmx just puts it in the right place without a full page navigation.

The four attributes

This is 95% of htmx:

• hx-get / hx-post / hx-put / hx-delete — fire the request
• hx-target — which element to update (CSS selector)
• hx-swap — how to insert the response
  • innerHTML — replace the target's children
  • outerHTML — replace the target itself
  • afterbegin — insert as first child
  • beforeend — insert as last child
  • delete — remove the target
• hx-trigger — when to fire (click default, also load, change, keyup delay:300ms)

That's it. Four attributes replace hundreds of lines of JavaScript.

Live demo: a counter button

The button below has zero custom JavaScript. It uses hx-post to send a request to /api/learn/demo/incr. The server increments a counter stored in your session, renders a new <button> element, and returns it. hx-swap="outerHTML" replaces the old button with the new one.

Progressive enhancement

htmx works on top of regular HTML. If JavaScript is disabled, a <form hx-post="/foo"> falls back to a regular form POST. The server returns the same HTML; htmx just makes it smoother. Your app degrades gracefully — that's a feature.