Skills
skills/xe/site/templ-htmx

templ-htmx

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.

  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.
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

Weekly Installs
26
Repository
xe/site
GitHub Stars
719
First Seen
Feb 15, 2026
Security Audits
Gen Agent Trust HubPass
SocketPass
SnykPass
Installed on
opencode26
gemini-cli26
github-copilot26
codex26
kimi-cli26
amp26