// 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'.
| 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'. |
Use progressive disclosure: first make one interaction work, then scale to advanced behaviors.
Use this skill for server-driven interactivity without a JS framework.
hx-* attributes to a component.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>
}
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.htmx.Is(r) and return fragments.HX-Trigger, HX-Redirect) for client behavior.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)
}
templ-http.templ-components.templ-syntax.resources/quick-start.mdresources/interaction-patterns.mdresources/advanced-responses.mdCreate new blogposts from a template or linkposts using the hydrate command.
Use when creating git commits, writing commit messages, or following version control workflows
Choose and create the right Neon branch type for testing and development. Use when users ask about Neon branching, migration testing with real data, isolated test environments, schema-only branch workflows for sensitive data, or branch creation via Neon CLI or Neon MCP. Triggers include "Neon branch", "test migrations safely", "branch production data", "schema-only branch", "reset branch" and "sensitive data testing".
Read files without making changes. Use when you need read-only file access.
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'.
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'.