templ-htmx
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/
More from xe/site
templ-syntax
Learn and write templ component syntax including expressions, conditionals, loops, and Go integration. Use when writing .templ files, learning templ syntax, or mentions 'templ component', 'templ expressions', or '.templ file syntax'.
28templ-components
Create reusable templ UI components with props, children, and composition patterns. Use when building UI components, creating component libraries, mentions 'button component', 'card component', or 'reusable templ components'.
27xe-writing-style
Transform unstructured notes into polished blog posts in Xe Iaso's voice. Use
1safe-file-reader
Read files without making changes. Use when you need read-only file access.
1neon-postgres
Guides and best practices for working with Neon Serverless Postgres. Covers getting started, local development with Neon, choosing a connection method, Neon features, authentication (@neondatabase/auth), PostgREST-style data API (@neondatabase/neon-js), Neon CLI, and Neon's Platform API/SDKs. Use for any Neon-related questions.
1templ-http
Integrate templ components with Go HTTP server using net/http. Use when connecting templ to web server, creating HTTP handlers, mentions 'templ server', 'HTTP routes', or 'serve templ components'.
1