htmx

Explain htmx attributes for server-rendered HTML interactivity.

Updated Apr 10, 2026

Search Tags:#patterns #ajax #htmx #fragments #progressive-enhancement #server-driven #html-over-the-wire

Ready to run

npx skills add https://github.com/yardenshoham/onepiece --skill htmx-yardenshoham

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: htmx
Source: https://github.com/yardenshoham/onepiece/tree/main/.agents/skills/htmx
Command: npx skills add https://github.com/yardenshoham/onepiece --skill htmx-yardenshoham

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

htmx enables HTML-over-the-wire interactivity by letting server-rendered HTML fragments drive UI updates without requiring heavy client-side JavaScript.

Core Features & Use Cases

Provides a mental model and reference for core htmx attributes such as hx-get, hx-post, hx-trigger, hx-target, and hx-swap to implement common UI patterns.
Enables server-driven updates and progressive enhancement by exchanging HTML fragments in response to user actions.
Suitable for patterns like click-to-edit, inline validation, infinite scroll, and lazy loading, all without JSON APIs.

Quick Start

Describe a scenario and ask for a minimal hx-get example that updates a page region using hx-swap.

Frequently Asked Questions about htmx

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I add dynamic interactivity to server-rendered HTML without writing client-side JavaScript?▼

Server-driven interactivity is achieved by using htmx attributes like hx-get and hx-post to fetch HTML fragments from the server and swap them into the DOM, eliminating the need for heavy client-side JavaScript or JSON APIs.

What is HTML-over-the-wire and how does it handle DOM updates?▼

HTML-over-the-wire is an architecture where the server responds to user actions with raw HTML fragments instead of JSON. Htmx uses hx-target and hx-swap attributes to inject these fragments directly into the DOM for dynamic UI updates.

How do I implement click-to-edit and inline validation using progressive enhancement?▼

Click-to-edit and inline validation are implemented by applying hx-trigger to user actions like clicks or input changes. The server then returns the appropriate HTML fragments with validation errors or updated content to swap into the page.

Can I build infinite scrolling and lazy loading on traditional HTML pages without a JSON API?▼

Yes, infinite scrolling and lazy loading are supported on traditional HTML pages. By configuring hx-get and hx-trigger to fire on scroll events, htmx requests the next batch of HTML fragments from the server and appends them to the DOM.

Does htmx require a Single Page Application framework to update page regions?▼

No, htmx does not require a Single Page Application framework. It applies progressive enhancement directly to traditional server-rendered HTML pages using hx-* attributes and proper response headers to drive partial DOM updates.

What's the best way to update a specific page region using htmx attributes?▼

The best way to update a specific page region is to use hx-get on an element to trigger a server request, then specify the target element with hx-target and define how the returned HTML fragment replaces existing content using hx-swap.