Learn

From htmx and templ

What each piece of a Go + templ + htmx stack is called in Trilha, and what has no equivalent.

If you already write Go, render HTML on the server and swap pieces of the page, you have made the two decisions this framework is built on. This page is not a tutorial — it is a translation table, plus the honest list of what is missing.

The table#

What has no equivalent, and why#

Out-of-band swaps (hx-swap-oob). One response changing a second, unrelated element — the cart badge in the header when you add an item — has no answer today. The workaround is to make the swapped fragment contain both, or to swap the piece that holds them. It is a real gap, and it is tracked rather than papered over.

Polling triggers (hx-trigger="every 2s"). There is no declarative poller. For live data the framework's answer is server-sent events, which are already what the dev reload rides on; for the general case you write the setInterval yourself in an island.

A generic event trigger. htmx will fire a request on any DOM event with any modifier (keyup changed delay:500ms). Trilha triggers on what HTML already triggers on: a link click and a form submit. Anything else is an island.

Template hot reload without a rebuild. templ can reload a template without recompiling Go. Trilha rebuilds the binary — usually about a second on an example app — because the pages are Go. You trade a little dev latency for the compiler checking every route.

What you get that the stack did not have#

• Routes from folders, checked by the compiler. app/blog/[slug]/page.go becomes a registered route in generated Go. A page whose function has the wrong signature is a compile error, not a 404 you find in staging.
• trilha check — one command that runs generate, gofmt, vet, tests, a security audit and the OpenAPI check, in that order, stopping at the first failure.
• Validation and field errors in the handler that renders HTML. c.Bind(&in) returns trilha.FieldErrors; ui.Errors(errs, "email") puts the message beside the input, and the same handler answers 422 with the form re-rendered.
• A ui kit with no dependency — around forty typed components over prefixed CSS, copied into your project so you can edit them.
• One binary at the end, with public/ embedded, that does not need the CLI to run.

What stays exactly the same#

The instinct. Render on the server, send HTML, let the browser do what browsers do, and reach for the client only where the client is genuinely the one who knows. Trilha does not ask you to change that — it asks you to stop wiring it together by hand.

If you are migrating a real application, the migration recipe covers a Next.js project; the shape of this move is smaller, because the hard decision is already made.

Challenge#

You are porting a screen where htmx did hx-get="/search" hx-target="#results" hx-trigger="keyup changed delay:300ms". Trilha has no event trigger. Port it anyway, keeping the search working for whoever has no JavaScript.

h.Form(h.Method("get"), h.Action("/search"), ui.Swap("results"),
    ui.Input(h.Name("q"), h.Value(q)),
    ui.Submit(h.Text("Search")),
    ui.Spinner(ui.Indicator("results")),
)
h.Div(h.ID("results"), rows())

let t;
document.addEventListener("input", (e) => {
  const field = e.target.closest('form[data-trilha-target] input[name=q]');
  if (!field) return;
  clearTimeout(t);
  t = setTimeout(() => field.form.requestSubmit(), 300);
});