Run any Skill in Manus with one click

$pwd:

templ-htmx

Name: Templ Htmx
Author: Xe

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

Run Skill in Manus

$ git log --oneline --stat

stars:725

forks:114

updated:May 10, 2026 at 18:21

File Explorer

4 files

SKILL.md

readonly

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

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/

related-skills.json

same repository

blogpost-creator.md

from "Xe/site"

Create new blogposts from a template or linkposts using the hydrate command.

2026-05-10725

conventional-commits.md

from "Xe/site"

Use when creating git commits, writing commit messages, or following version control workflows

2026-05-10725

neon-postgres-branches.md

from "Xe/site"

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

2026-05-10725

safe-file-reader.md

from "Xe/site"

Read files without making changes. Use when you need read-only file access.

2026-05-10725

templ-components.md

from "Xe/site"

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

2026-05-10725

templ-http.md

from "Xe/site"

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

2026-05-10725

package.json

"author": "Xe"

"repository": "Xe/site"

View GitHub Repository View Creator Repositories

$ install --global

$ download --local

Run Skill in Manus

$ useful --forSOC

Web DevelopersComputer and Mathematical Occupations15-1254L4

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

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/

templ-htmx

Templ + HTMX Integration

Level 1: First Working Flow

Level 2: Core HTMX Controls

Level 3: Advanced Server Patterns

Escalate to Other Skills

References

More from this repository

More from this repository

Templ + HTMX Integration

Level 1: First Working Flow

Level 2: Core HTMX Controls

Level 3: Advanced Server Patterns

Escalate to Other Skills

References