templUI & HTMX/Alpine Best Practices

Apply templUI patterns and HTMX/Alpine.js best practices when building Go/Templ web applications.

The Frontend Stack

The Go/Templ stack uses three complementary tools for interactivity:

Tool	Purpose	Use For
HTMX	Server-driven interactions	AJAX requests, form submissions, partial page updates, live search
Alpine.js	Client-side state & reactivity	Toggles, animations, client-side filtering, transitions, local state
templUI	Pre-built UI components	Dropdowns, dialogs, tabs, sidebars (uses vanilla JS via Script() templates)

Note: templUI components use vanilla JavaScript (not Alpine.js) via Script() templates. This is fine - Alpine.js is still part of the stack for your custom client-side needs.

HTMX + Alpine.js Integration

HTMX and Alpine.js work great together. Use HTMX for server communication, Alpine for client-side enhancements.

When to Use Each

html

<!-- HTMX: Server-driven (fetches HTML from server) -->
<button hx-get="/api/users" hx-target="#user-list">Load Users</button>

<!-- Alpine: Client-side state (no server call) -->
<div x-data="{ open: false }">
  <button @click="open = !open">Toggle</button>
  <div x-show="open">Content</div>
</div>

<!-- Combined: HTMX loads data, Alpine filters it -->
<div x-data="{ filter: '' }">
  <input x-model="filter" placeholder="Filter...">
  <div hx-get="/users" hx-trigger="load">
    <template x-for="user in users.filter(u => u.name.includes(filter))">
      <div x-text="user.name"></div>
    </template>
  </div>
</div>

Key Integration Patterns

Alpine-Morph Extension: Preserves Alpine state across HTMX swaps:

html

<script src="https://unpkg.com/htmx.org/dist/ext/alpine-morph.js"></script>
<div hx-ext="alpine-morph" hx-swap="morph">...</div>

htmx.process() for Alpine Conditionals: When Alpine's

x-if

renders HTMX content:

html

<template x-if="showForm">
  <form hx-post="/submit" x-init="htmx.process($el)">...</form>
</template>

Triggering HTMX from Alpine:

html

<button @click="htmx.trigger($refs.form, 'submit')">Submit</button>

templUI Components (Vanilla JS)

templUI components handle their own interactivity via Script() templates using vanilla JavaScript and Floating UI for positioning.

CRITICAL: Templ Interpolation in JavaScript

Go expressions
{ value }
do NOT interpolate inside
<script>
tags or inline event handlers. They are treated as literal text, causing errors like:

GET http://localhost:8008/app/quotes/%7B%20id.String()%20%7D 400 (Bad Request)

The

%7B

and

%7D

are URL-encoded

and

- proof the expression wasn't evaluated.

Pattern 1: Data Attributes (Recommended)

Use

data-*

attributes to pass Go values, then access via JavaScript:

templ

<button
  data-quote-id={ quote.ID.String() }
  onclick="openPublishModal(this.dataset.quoteId)">
  Publish
</button>

For multiple values:

templ

<div
  data-id={ item.ID.String() }
  data-name={ item.Name }
  data-status={ item.Status }
  onclick="handleClick(this.dataset)">

Pattern 2: templ.JSFuncCall (for onclick handlers)

Automatically JSON-encodes arguments and prevents XSS:

templ

<button onclick={ templ.JSFuncCall("openPublishModal", quote.ID.String()) }>
  Publish
</button>

With multiple arguments:

templ

<button onclick={ templ.JSFuncCall("updateItem", item.ID.String(), item.Name, item.Active) }>

To pass the event object, use

templ.JSExpression

templ

<button onclick={ templ.JSFuncCall("handleClick", templ.JSExpression("event"), quote.ID.String()) }>

Pattern 3: Double-Braces Inside Script Strings

Inside

<script>

tags, use

{{ value }}

(double braces) for interpolation:

templ

<script>
  const quoteId = "{{ quote.ID.String() }}";
  const itemName = "{{ item.Name }}";
  openPublishModal(quoteId);
</script>

Outside strings (bare expressions), values are JSON-encoded:

templ

<script>
  const config = {{ templ.JSONString(config) }};
  const isActive = {{ item.Active }};  // outputs: true or false
</script>

Pattern 4: templ.JSONString for Complex Data

Pass complex structs/maps to JavaScript via attributes:

templ

<div data-config={ templ.JSONString(config) }>

<script>
  const el = document.querySelector('[data-config]');
  const config = JSON.parse(el.dataset.config);
</script>

Or use

templ.JSONScript

templ

@templ.JSONScript("config-data", config)

<script>
  const config = JSON.parse(document.getElementById('config-data').textContent);
</script>

Pattern 5: templ.OnceHandle for Reusable Scripts

Ensures scripts are only rendered once, even when component is used multiple times:

templ

var publishHandle = templ.NewOnceHandle()

templ QuoteRow(quote Quote) {
  @publishHandle.Once() {
    <script>
      function openPublishModal(id) {
        fetch(`/api/quotes/${id}/publish`, { method: 'POST' });
      }
    </script>
  }
  <button
    data-id={ quote.ID.String() }
    onclick="openPublishModal(this.dataset.id)">
    Publish
  </button>
}

When to Use Each Pattern

Scenario	Use
Simple onclick with one value	Data attribute or `templ.JSFuncCall`
Multiple values needed in JS	Data attributes
Need event object	`templ.JSFuncCall` with `templ.JSExpression("event")`
Inline script with Go values	`{{ value }}` double braces
Complex object/struct	`templ.JSONString` or `templ.JSONScript`
Reusable script in loop	`templ.OnceHandle`

Common Mistakes

templ

// WRONG - won't interpolate, becomes literal text
onclick="doThing({ id })"

// WRONG - single braces don't work in scripts
<script>const x = { value };</script>

// WRONG - Go expression in URL string inside script
<script>
  fetch(`/api/quotes/{ id }/publish`)  // BROKEN
</script>

// CORRECT alternatives:
onclick={ templ.JSFuncCall("doThing", id) }

<script>const x = "{{ value }}";</script>

<button data-id={ id } onclick="doFetch(this.dataset.id)">

templUI CLI Tool

Install CLI:

bash

go install github.com/templui/templui/cmd/templui@latest

Key Commands:

bash

templui init                    # Initialize project, creates .templui.json
templui add button card         # Add specific components
templui add "*"                 # Add ALL components
templui add -f dropdown         # Force update existing component
templui list                    # List available components
templui new my-app              # Create new project
templui upgrade                 # Update CLI to latest version

ALWAYS use the CLI to add/update components - it fetches the complete component including Script() templates that may be missing if copied manually.

Script() Templates - REQUIRED for Interactive Components

Components with JavaScript include a

Script()

template function. You MUST add these to your base layout's
<head>
:

templ

// In your base layout <head>:
@popover.Script()      // Required for: popover, dropdown, tooltip, combobox
@dropdown.Script()     // Required for: dropdown
@dialog.Script()       // Required for: dialog, sheet, alertdialog
@accordion.Script()    // Required for: accordion, collapsible
@tabs.Script()         // Required for: tabs
@carousel.Script()     // Required for: carousel
@toast.Script()        // Required for: toast/sonner
@clipboard.Script()    // Required for: copybutton

Component Dependencies:

Component	Requires Script() from
dropdown	dropdown, popover
tooltip	popover
combobox	popover
sheet	dialog
alertdialog	dialog
collapsible	accordion

If a component doesn't work (no click events, no positioning), check that:

The Script() template is called in the layout
The component was installed via CLI (not manually copied)
All dependency scripts are included

Converting Sites to Templ/templUI

When converting HTML/React/Vue to Go/Templ:

Conversion Process:

Analyze existing UI patterns
Map to templUI base components
Convert syntax:
- ```
class
```
  stays as
```
class
```
  in templ
- ```
className
```
  (React) →
```
class
```
- React/Vue event handlers → vanilla JS via Script() or HTMX
- Dynamic content → templ expressions
```
{ variable }
```
  or
```
@component()
```
Add required Script() templates to layout
Set up proper Go package structure

Templ Syntax Quick Reference:

templ

package components

type ButtonProps struct {
    Text    string
    Variant string
}

templ Button(props ButtonProps) {
    <button class={ "btn", props.Variant }>
        { props.Text }
    </button>
}

// Conditional
if condition {
    <span>Shown</span>
}

// Loops
for _, item := range items {
    <li>{ item.Name }</li>
}

// Composition
@Header()
@Content() {
    // Children
}

Auditing for Better Component Usage

Audit Checklist:

Script() Templates: Are all required Script() calls in the base layout?
CLI Installation: Were components added via
```
templui add
```
or manually copied?
Component Consistency: Same patterns using same components?
Base Component Usage: Custom code that could use templUI?
Dark Mode: Tailwind dark: variants used?
Responsive: Mobile breakpoints applied?

Common Issues to Check:

Missing
```
@popover.Script()
```
→ dropdowns/tooltips don't open
Missing
```
@dialog.Script()
```
→ dialogs/sheets don't work
Manually copied components missing Script() template files

Import Pattern

import "github.com/templui/templui/components/button"
import "github.com/templui/templui/components/dropdown"
import "github.com/templui/templui/components/dialog"

Troubleshooting

JavaScript URL contains literal
{
or
%7B
(URL-encoded brace): Go expressions don't interpolate in

<script>

tags. Use data attributes:

templ

// WRONG: <script>fetch(`/api/{ id }`)</script>
// RIGHT:
<button data-id={ id } onclick="doFetch(this.dataset.id)">

See "CRITICAL: Templ Interpolation in JavaScript" section above.

Component not responding to clicks:

Check Script() is in layout:
```
@dropdown.Script()
```
,
```
@popover.Script()
```
Reinstall:
```
templui add -f dropdown popover
```
Check browser console for JS errors

Dropdown/Tooltip not positioning correctly:

Ensure
```
@popover.Script()
```
is in layout (uses Floating UI)
Reinstall popover:
```
templui add -f popover
```

Dialog/Sheet not opening:

Add
```
@dialog.Script()
```
to layout
Reinstall:
```
templui add -f dialog
```

Resources

templUI:

Documentation: https://templui.io/docs
GitHub: https://github.com/templui/templui

HTMX + Alpine.js:

Templ:

Templ Docs: https://templ.guide

This skill provides templUI and HTMX/Alpine.js best practices for Go/Templ web development.

templui

NPX Install

Tags

SKILL.md Content

templUI & HTMX/Alpine Best Practices

The Frontend Stack

HTMX + Alpine.js Integration

When to Use Each

Key Integration Patterns

templUI Components (Vanilla JS)

CRITICAL: Templ Interpolation in JavaScript

Pattern 1: Data Attributes (Recommended)

Pattern 2: templ.JSFuncCall (for onclick handlers)

Pattern 3: Double-Braces Inside Script Strings

Pattern 4: templ.JSONString for Complex Data

Pattern 5: templ.OnceHandle for Reusable Scripts

When to Use Each Pattern

Common Mistakes

templUI CLI Tool

Script() Templates - REQUIRED for Interactive Components

Converting Sites to Templ/templUI

Auditing for Better Component Usage

Import Pattern

Troubleshooting

Resources