| name | templ-syntax |
| description | Learn and write templ component syntax including expressions, conditionals, loops, and Go integration. Use when writing .templ files, learning templ syntax, or mentions 'templ component', 'templ expressions', or '.templ file 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.
- 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
