majiayu000 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/