Templ Syntax

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) {
    Hello, { name }
    if isAdmin {
        Admin mode
    }
}

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) {
    
        { title }
        { children... }
    
}

templ UserList(users []string) {
    if len(users) == 0 {
        No users
    } else {
        
            for _, user := range users {
                { user }
            }
        
    }
}

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/

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: Xe
• Source: Xe/skills
• License: MIT

Install and usage instructions live in the source repository linked above.