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.
-
Define a component with typed params.
-
Render values with { expr } .
-
Compose components with @OtherComponent(...) .
-
Use Go control flow (if , for , switch ) directly in markup.
-
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/