| name | templ-htmx |
| description | 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'. |
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.
- Mount HTMX assets in server setup.
- Include HTMX script in the layout.
- Add
hx-* attributes to a component.
- Return a partial component from the handler.
- Branch full-page vs fragment responses with HTMX request detection.
import "within.website/x/web/htmx"
func main() {
mux := http.NewServeMux()
htmx.Mount(mux)
}
import "within.website/x/web/htmx"
templ Layout() {
<html>
<head>@htmx.Use()</head>
<body>{ children... }</body>
</html>
}
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.
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
