templ-htmx_skill

Overview

This skill integrates templ's type-safe server-side components with HTMX to build interactive, hypermedia-driven web UIs with minimal JavaScript. It provides helpers to mount HTMX assets, detect HTMX requests, and produce partial HTML fragments for AJAX-like interactions. Use it to deliver progressive enhancement, real-time polling, and OOB updates while keeping handlers simple and fast.

How this skill works

The integration mounts the HTMX client library and exposes a small API for templates and handlers. templ components include htmx.Use() to inject the script and optional extensions (sse, websocket, path-params, etc.). Handlers detect htmx.Is(r) to return either a full page or a partial fragment, and can set HTMX response headers like HX-Trigger, HX-Redirect, and HX-Refresh. Common hx-* attributes (hx-get, hx-post, hx-target, hx-swap, hx-trigger) are used inside templ components to wire interactive behavior without client-side frameworks.

When to use it

• Building interactive UIs with server-rendered components
• Adding live search, infinite scroll, or inline edit flows
• Implementing AJAX-like interactions without a front-end framework
• Adding polling or server-sent updates and out-of-band UI changes
• Progressively enhancing forms and pages to work without JavaScript

Best practices

• Return only the HTML fragment needed for HTMX requests to keep responses small
• Use semantic HTML so pages work without JavaScript and remain accessible
• Handle errors by returning dedicated error components and meaningful status codes
• Leverage OOB swaps to update multiple distinct parts of the page in one response
• Set HX-* headers for client events, redirects, or refresh actions when appropriate

Example use cases

• Live search box that issues hx-get on keyup and swaps results into a results panel
• Counter or widget with hx-post increment endpoint that renders only the updated fragment
• Infinite scroll: a PostList that uses hx-trigger="revealed" to append next page
• Inline edit flow where EditForm is swapped into the field container and saved via hx-post
• Dashboard stats panel that polls every N seconds with hx-trigger="load, every 5s"