Sign in Get started

Free course · 18 lessons · Beginner

htmx: Build Interactive Web Apps with HTML

Build modern, interactive web apps by returning HTML from your server instead of JSON. Start with why hypermedia works, requests, targets, swaps, triggers and forms; build a complete contacts app with active search, adding, editing, deleting, bulk actions and infinite scroll; then handle production concerns: loading states and failures, URLs and history, security and server-side templates. Finish with JavaScript islands, real-time updates, upgrading to htmx 4 and choosing the right architecture. Every example is a live, clickable preview. You should know basic HTML; any backend language works.

Start the course

1. Hypermedia Foundations

Why htmx exists, the request-swap cycle, triggers and timing, and forms with browser and server validation.

  1. Why htmx? Hypermedia vs JSON APIs — Build the same Like button twice, once with fetch and JSON and once with htmx, and see what each approach asks of you.
  2. Requests, Targets and Swaps — Build a comments widget: load comments on demand, post a new one, and choose exactly where and how each response lands.
  3. Triggers and Timing — Build a notifications badge that polls, a section that loads lazily, and a search box that waits for the user to pause.
  4. Forms the htmx Way — Build a sign-up form with browser validation, server-side errors returned with 422, a loading state and a reset after success.

2. Build a Contacts App

A small but complete app built step by step: a searchable list, adding, editing and deleting contacts, bulk actions and paging.

  1. The Contact List and Active Search — Build a contact table that filters as the user types, keeps the search in the URL and never shows stale results.
  2. Adding Contacts and Updating Several Places — Add a contact from a form, append the new row, update a counter in the header out of band, and notify other parts of the page with HX-Trigger.
  3. Editing Rows in Place — Turn a table row into an edit form, save with PUT, cancel back to the view, and stop a second row from being edited at the same time.
  4. Deleting and Bulk Actions — Delete a contact with confirmation and a fade-out, then select several rows with checkboxes and delete them in one request.
  5. Paging and Infinite Scroll — Load the contact list one page at a time, first with a Load more button, then automatically as the user scrolls.

3. Production Concerns

What changes when real users, slow networks and attackers arrive: loading states and failures, URLs and history, security, and organising the server.

  1. Loading States, Races and Failures — Make a save button behave well on a slow or broken network: show progress, prevent double submits, time out, and tell the user when something failed.
  2. URLs, History and hx-boost — Make htmx pages shareable and reload-safe: push URLs, boost navigation, return full pages on direct visits, and set Vary for caches.
  3. Securing an htmx App — Defend the contacts app against XSS, injected htmx attributes and CSRF, and lock down htmx's own settings.
  4. Organising the Server: Partials, Fragments and Headers — Structure templates so the same markup serves full pages and htmx fragments, and use response headers for redirects and events.

4. Beyond the Basics

Working with JavaScript, real-time updates, upgrading to htmx 4, and deciding when htmx is the right tool.

  1. htmx and JavaScript Together — Use hx-on for small behaviours, react to htmx events, initialise widgets in swapped content, and pair htmx with Alpine.js.
  2. Real-Time Updates — Choose between polling, Server-Sent Events and WebSockets, and build an export job whose progress updates live.
  3. Upgrading to htmx 4 — Plan an upgrade from htmx 2 to htmx 4: explicit inheritance, new event names, error swapping, renamed attributes and the upgrade checker.
  4. Choosing htmx: Architecture Decisions — Decide when htmx is the right architecture, when a JavaScript framework is, and how to combine them in one product.

5. Capstone

Build and review a complete htmx app.

  1. Capstone: A Team Task Board with htmx — Build a production-ready task board with your own backend: lists, search, inline editing, live updates, history, security and tests.

Was this page helpful?