Skip to content

HTMX — Complete Guide

In this tutorial, you'll learn about HTMX. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

HTMX is a lightweight library that allows you to access modern browser features directly from HTML attributes. It enables AJAX requests, CSS transitions, WebSockets, and Server-Sent Events without writing JavaScript, making it a powerful tool for hypermedia-driven applications.

In This Section

  • Getting Started — hx-get, hx-post, hx-target, and basic AJAX
  • Requests & Triggers — hx-trigger, hx-vals, hx-headers, and request modifiers
  • Swapping & Transitions — hx-swap, swap styles, and CSS transitions
  • Advanced Patterns — WebSockets, SSE, history, and progressive enhancement

Published Topics

HTMX Getting Started — Complete Beginner's Guide with Practical Examples

Learn HTMX from scratch: master hx-get, hx-post, hx-target, and hx-swap to build AJAX-driven web applications without writing JavaScript. Step-by-step tutorial with runnable examples.

✓ Live

HTMX Requests & Triggers Explained — Complete Guide to hx-trigger, hx-vals & hx-sync

Master HTMX requests and triggers: hx-vals, hx-params, hx-headers, hx-ext extensions, trigger modifiers like delay and throttle, and hx-sync for race conditions. Practical guide with runnable examples.

✓ Live

HTMX Swapping & Transitions — Complete Guide to hx-swap, CSS Animations & OOB Swaps

Master HTMX swapping strategies: innerHTML, outerHTML, morphing, OOB swaps, CSS transitions, and ViewTransitions API. Build smooth animated UIs without JavaScript.

✓ Live

HTMX Advanced Patterns — Complete Guide to WebSockets, SSE & Production Deployment

Master advanced HTMX patterns: WebSockets, Server-Sent Events, hx-boost, history management, CSRF protection, and progressive enhancement for production apps.

✓ Live

HTMX Attributes — Complete Reference Guide

Learn HTMX attributes: hx-get, hx-post, hx-put, hx-patch, hx-delete, hx-target, hx-swap, hx-trigger, and all core HTMX directives. Step-by-step reference for beginners.

✓ Live

HTMX Targets — Complete Guide with Examples

Learn HTMX targets: CSS selectors, extended selectors like closest, next, previous, find, this, and targeting multiple elements. Step-by-step tutorial for beginners.

✓ Live

HTMX Triggers — Complete Guide with Examples

Learn HTMX triggers: click, load, input, every, mouseenter, custom events, trigger modifiers (delay, throttle, once), and multi-trigger configurations. Step-by-step tutorial.

✓ Live

HTMX Swapping — Complete Guide with Examples

Learn HTMX swapping strategies: innerHTML, outerHTML, beforebegin, afterbegin, beforeend, afterend, delete, none, and CSS transition animations. Step-by-step tutorial.

✓ Live

HTMX Synchronization — Complete Guide with Examples

Learn HTMX request synchronization: hx-sync, queue requests, prevent race conditions, coordinate multiple elements, and control request order. Step-by-step tutorial for beginners.

✓ Live

HTMX History Management — Complete Guide with Examples

Learn HTMX history: browser back/forward navigation, hx-push-url, hx-replace-url, history cache, and restoring state from history. Step-by-step tutorial for beginners.

✓ Live

HTMX Indicators — Complete Guide with Examples

Learn HTMX indicators: hx-indicator, htmx-request class, loading states, progress bars, custom indicators, and CSS animations for request feedback. Step-by-step tutorial.

✓ Live

HTMX with Hyperscript — Complete Guide with Examples

Learn HTMX with Hyperscript: add client-side behavior, events, and logic without JavaScript. Step-by-step tutorial with runnable examples combining HTMX and Hyperscript.

✓ Live

HTMX Extensions — Complete Guide with Examples

Learn HTMX extensions: JSON-enc, client-side-templates, path-deps, class-tools, multi-swap, and how to create custom extensions. Step-by-step tutorial for beginners.

✓ Live

HTMX Project — Build a Complete Application with HTMX

Build a complete HTMX project: AJAX-driven dashboard with search, CRUD operations, polling, indicators, history, and extensions. Step-by-step project tutorial for beginners.

✓ Live

All 14 topics in HTMX — Complete Guide are published.