Templ Syntax

Use this skill with progressive disclosure: start at Level 1, then read deeper sections only when needed.

Level 1: Fast Path

Use this skill when you need to write or fix .templ syntax.

1. Define a component with typed params.
2. Render values with { expr }.
3. Compose components with @OtherComponent(...).
4. Use Go control flow (if, for, switch) directly in markup.
5. Keep business logic in Go helpers, not inline in templates.

package components

templ Greeting(name string, isAdmin bool) {
    <h1>Hello, { name }</h1>
    if isAdmin {
        <p>Admin mode</p>
    }
}

Level 2: Core Rules

• Output: { value } auto-escapes text.
• Dynamic attrs: class={ classes }, disabled?={ isDisabled }.
• Children: accept with { children... }, pass with block syntax.
• Composition: call components with @Component(...).
• Safety: URLs should use safe helpers (for example templ.URL(...)) when appropriate.

Level 3: Common Patterns

templ Card(title string) {
    <section class="card">
        <h2>{ title }</h2>
        <div>{ children... }</div>
    </section>
}

templ UserList(users []string) {
    if len(users) == 0 {
        <p>No users</p>
    } else {
        <ul>
            for _, user := range users {
                <li>{ user }</li>
            }
        </ul>
    }
}

Escalate to Other Skills

• Building reusable UI APIs: use templ-components.
• Wiring templates to handlers/routes: use templ-http.
• Adding dynamic interactions: use templ-htmx.

References

• Foundations: resources/foundations.md
• Patterns: resources/patterns.md
• Reference: resources/reference.md
• templ docs: https://templ.guide
• Syntax and expressions: https://templ.guide/syntax-and-usage/