# Templ Htmx > Build interactive hypermedia-driven applications with templ and HTMX. Use when creating dynamic UIs, real-time updates, AJAX interactions, mentions 'HTMX', 'dynamic content', or 'interactive templ app'. Use when this capability is needed. - Skill: `tomevault-io/templ-htmx-2` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/templ-htmx-2` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/templ-htmx-2/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Coding & Dev Tools - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/templ-htmx-2 --- # Templ + HTMX Integration Use progressive disclosure: first make one interaction work, then scale to advanced behaviors. ## Level 1: First Working Flow Use this skill for server-driven interactivity without a JS framework. 1. Mount HTMX assets in server setup. 2. Include HTMX script in the layout. 3. Add `hx-*` attributes to a component. 4. Return a partial component from the handler. 5. Branch full-page vs fragment responses with HTMX request detection. ```go import "xeiaso.net/v4/web/htmx" func main() { mux := http.NewServeMux() htmx.Mount(mux) } ``` ```templ import "xeiaso.net/v4/web/htmx" templ Layout() { @htmx.Use() { children... } } ``` ## Level 2: Core HTMX Controls - `hx-get` / `hx-post`: trigger requests. - `hx-target`: pick where response lands. - `hx-swap`: choose replacement strategy (`innerHTML`, `outerHTML`, `beforeend`). - `hx-trigger`: control event timing (`click`, `change`, `every 5s`, etc). - `hx-indicator`: show loading state. ## Level 3: Advanced Server Patterns - Detect HTMX requests with `htmx.Is(r)` and return fragments. - Use out-of-band updates for multi-region refreshes. - Use response headers (`HX-Trigger`, `HX-Redirect`) for client behavior. - Preserve progressive enhancement: endpoints should still work without JS. ```go func profileHandler(w http.ResponseWriter, r *http.Request) { if htmx.Is(r) { _ = components.ProfilePanel().Render(r.Context(), w) return } _ = components.ProfilePage().Render(r.Context(), w) } ``` ## Escalate to Other Skills - Need handler/routing structure: use `templ-http`. - Need reusable component APIs: use `templ-components`. - Need template syntax help: use `templ-syntax`. ## References - Quick start: `resources/quick-start.md` - Interaction patterns: `resources/interaction-patterns.md` - Advanced responses: `resources/advanced-responses.md` - HTMX docs: https://htmx.org/docs/ - Hypermedia Systems: https://hypermedia.systems/ --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/xe) — claim your Tome and manage your conversions.