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 "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
- 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/skills
xe-go-style
Write Go code following the conventions and patterns used in the within.website/x repository, including CLI patterns, error handling, logging with slog, HTTP handlers, and testing.
6gorm-dao
Write GORM data access code using the DAO (Data Access Object) pattern. Use when creating database models, writing queries, setting up GORM, adding CRUD methods, or working with gorm.io in Go services. Also use when the user mentions "DAO", "data access", "ORM", "database models", "GORM", or is building a Go service that talks to a relational database.
4templ-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'.
4templ-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'.
4templ-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'.
4xe-writing-style
Transform unstructured notes into polished blog posts in Xe Iaso's voice. Use
1