# Templ Htmx

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

- **Type:** Skill
- **Install:** `agentstack add skill-xe-skills-templ-htmx`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [Xe](https://agentstack.voostack.com/s/xe)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [Xe](https://github.com/Xe)
- **Source:** https://github.com/Xe/skills/tree/main/skills/templ-htmx

## Install

```sh
agentstack add skill-xe-skills-templ-htmx
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

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

```go
import "within.website/x/web/htmx"

func main() {
    mux := http.NewServeMux()
    htmx.Mount(mux)
}
```

```templ
import "within.website/x/web/htmx"

templ Layout() {
    
        @htmx.Use()
        { children... }
    
}
```

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

```go
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/

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [Xe](https://github.com/Xe)
- **Source:** [Xe/skills](https://github.com/Xe/skills)
- **License:** MIT

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** yes
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-xe-skills-templ-htmx
- Seller: https://agentstack.voostack.com/s/xe
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.