Sign in Get started

Free tutorial · 30 lessons

htmx Tutorial

Learn htmx 2 step by step with a live, clickable example on every page: requests with hx-get and hx-post, triggers, targets and swaps, forms and validation, loading indicators, out-of-band updates, active search, infinite scroll, click-to-edit, history and hx-boost, events, response headers, the server side, security, real-time updates and upgrading to htmx 4.

Start learning →

htmx Basics

  1. htmx Introduction — What htmx is, the one idea behind it, how it differs from React-style apps, and a first live example.
  2. Get Started with htmx — Add htmx to a page with one script tag (or npm), write a tiny server, and learn how the examples on this site work.
  3. How htmx Works — The request-swap cycle step by step, what htmx sends to the server, and how to read the request log.
  4. htmx History & Versions — How htmx grew out of intercooler.js, why its authors call it a return to hypermedia, every version from 1.0 to 4.0 on one timeline, and which version to use today.

Making Requests

  1. AJAX Requests: hx-get, hx-post and more — The five request attributes, which HTTP method to use for what, and how the URL and values are sent.
  2. Triggers: hx-trigger — Choose which event sends the request: clicks, typing with a delay, page load, scrolling into view, keyboard filters and polling.
  3. Targets: hx-target — Put the response somewhere other than the triggering element using CSS selectors and relative selectors like closest and next.
  4. Swapping: hx-swap — Control how the response goes into the target: inner or outer HTML, before or after, delete, none, plus timing and scrolling.
  5. Sending Values: hx-include, hx-vals and hx-params — Send values from other inputs, add extra values, and filter which values are sent.
  6. Forms and Validation — Submit forms with htmx, keep browser validation, show server-side errors with a 422 response, and reset the form after success.

User Feedback

  1. Loading Indicators — Show a spinner while a request runs with hx-indicator and the htmx-request class, and disable buttons with hx-disabled-elt.
  2. Confirming Actions: hx-confirm and hx-prompt — Ask before destructive requests with hx-confirm, ask for a value with hx-prompt, and where custom dialogs fit in.
  3. Picking Part of a Response: hx-select — Use only part of a server response with hx-select, useful when a URL returns a full page.
  4. Updating Several Places: Out-of-Band Swaps — Update more than one part of the page from a single response with hx-swap-oob.
  5. Animations and Transitions — Fade new content in and old content out with the CSS classes htmx adds during swaps, and use View Transitions.

Common Patterns

  1. Active Search — Search as the user types, without sending a request for every keystroke, and keep the results accessible.
  2. Load More and Infinite Scroll — Load the next page of results with a button, or automatically when the user scrolls to the end.
  3. Click to Edit — Show a record, swap in an edit form with one click, save with PUT, and cancel back to the view.
  4. Delete a Row — Delete items from a table with confirmation and a fade-out, using one hx-confirm for the whole table.
  5. Inline Validation — Check a field on the server as soon as the user leaves it, and show the message next to the field.
  6. Tabs and Lazy Loading — Build tabs that load their content from the server, and load slow sections after the page appears.

Going Further

  1. hx-boost, hx-push-url and History — Make normal links and forms load without a full page refresh, update the address bar, and keep the Back button working.
  2. Events and hx-on — Run small scripts with hx-on, react to htmx's lifecycle events, and trigger client events from the server with HX-Trigger.
  3. Response Headers — Let the server control what happens next: redirect, refresh, retarget the swap, change the swap style, or push a URL.
  4. The htmx JavaScript API — Call htmx from your own scripts: htmx.ajax, htmx.process for new HTML, htmx.on, htmx.trigger and htmx.config.
  5. The Server Side: Templates and Partials — Organise server templates for htmx: return fragments to htmx and full pages to normal visits, with examples in Flask, Django, Express and Laravel.
  6. Security — Escape user content, protect against CSRF, stop htmx from processing untrusted HTML, and the htmx security settings.
  7. Real-Time Updates: Polling, SSE and WebSockets — Keep a page up to date with polling, Server-Sent Events or WebSockets, and know which one to pick.
  8. Upgrading to htmx 4 — What changed in htmx 4 (released August 2026): fetch, explicit inheritance, new event names, error swapping, and how to upgrade from htmx 2.
  9. When to Use htmx (and When Not) — Where htmx shines, where a JavaScript framework is the better tool, and how to combine htmx with Alpine.js or small scripts.

Was this page helpful?