HTMX from Go

The dot-imported HTMX value is a full Go mirror of htmx 2.0.3. When you want to put server-rendered HTML into the page — and let nested Gothic components come alive — reach for HTMX.

HTMX or Fetch? Rule of thumb: render HTML → HTMX.Swap/HTMX.Ajax; compute on data → Fetch + Decode. If the server already knows how to draw it, let it — and swap the HTML in.

HTMX.Ajax asks htmx to fetch a URL and swap the reply into a Target. Pass AjaxOpts (Target, Source, Swap, Values) to steer it.

// HTMX.Ajax: htmx fetches the URL and swaps the response into a target.
// Because htmx runs scripts and processes the new nodes, a swapped-in
// Gothic stateful component boots and becomes interactive on its own.
CreateWasmFunc("loadPanel", func() {
	HTMX.Ajax("GET", "/components/user-panel", AjaxOpts{
		Target: "#panel",   // where the HTML lands
		Swap:   InnerHTML,   // how it lands (default)
	})
})

Already have the HTML? HTMX.Swap drops it into a target using any of the eight SwapStrategy consts. It runs scripts and htmx.process, so a swapped-in fragment that embeds a stateful component boots automatically. HTMX.Process does the same for HTML you inserted yourself.

Security: HTMX.Swap executes <script> in the markup (that's how nested components boot). Only ever swap trusted HTML — your own templates or your own BFF — never arbitrary third-party HTML.

// HTMX.Swap: you already have the HTML (e.g. from a Fetch) — swap it in.
// It runs <script> tags + htmx.process, so nested components boot here too.
CreateWasmFunc("showFragment", func() {
	go func() {
		resp, err := Fetch("/components/user-panel")
		if err != nil {
			return
		}
		// swap styles: InnerHTML, OuterHTML, BeforeEnd, AfterBegin,
		// BeforeBegin, AfterEnd, Delete, None
		HTMX.Swap("#panel", resp.Text(), OuterHTML)
	}()
})

// Inserted HTML yourself without htmx? Boot any components inside it:
CreateWasmFunc("boot", func() {
	HTMX.Process("#panel")
})

HTMX.Trigger dispatches an htmx event on an element. Events are typed HtmxEvent consts (EvtAfterSwap, EvtBeforeRequest, EvtLoad, and the rest of the 2.0.3 catalog); for a custom event, cast a string with HtmxEvent("my:event").

// HTMX.Trigger fires an htmx event on an element. Events are typed
// consts with an Evt prefix (EvtAfterSwap, EvtBeforeRequest, ...).
// For a custom event, cast a string: HtmxEvent("my:event").
CreateWasmFunc("refresh", func() {
	HTMX.Trigger("#feed", HtmxEvent("refresh"))
})

CreateWasmFunc("ping", func() {
	// optional detail map is delivered as event.detail
	HTMX.Trigger("#bus", HtmxEvent("app:ping"), map[string]any{"id": 7})
})

Rendering is done — now listen for events and tweak the DOM: On, classes, Find, Values and more, next!