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'.
Resources
1Install
npx skillscat add xe/site/templ-htmx Install via the SkillsCat registry.
SKILL.md
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 "xeiaso.net/v4/web/htmx"
func main() {
mux := http.NewServeMux()
htmx.Mount(mux)
}import "xeiaso.net/v4/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
- 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/
Categories
Install
npx skillscat add xe/site/templ-htmx Install via the SkillsCat registry.
Repository Stars
The star count shown is for the parent repository (Xe/site), not this specific skill.
.claude/skills/templ-htmx