# Templ Syntax > 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'. Use when this capability is needed. - Skill: `tomevault-io/templ-syntax-2` (Agent Skill, multi-file: 2 files) - Install (CLI): `npx skillmds@latest add tomevault-io/templ-syntax-2` - Raw SKILL.md: https://api.skillmd.com/api/skills/tomevault-io/templ-syntax-2/raw - Safety review: pending (external: skill-scanner PASS, skillspector PASS) - Works with: Claude Code, Claude.ai, OpenAI Codex - Category: Web & Frontend - Author: tomevault-io (https://skillmd.com/u/tomevault-io) - Updated: 2026-09-17 - Page: https://skillmd.com/skills/tomevault-io/templ-syntax-2 --- # Templ Syntax ## Overview Templ syntax combines Go code with HTML markup in `.templ` files. Components are compiled to Go functions, giving you type safety and IDE support. ## When to Use This Skill Use when: - Writing `.templ` component files - Learning templ syntax and expressions - User mentions "templ syntax", "component definition", ".templ file" - Converting HTML to templ components ## Basic Syntax ### Component Definition ```templ package components templ ComponentName(param1 type1, param2 type2) {
Content
} ``` **Rules:** - Start with `package` declaration - Use `templ` keyword for component - PascalCase for exported components - camelCase for internal components ### Expressions Output Go variables with `{ }`: ```templ templ Greeting(name string, age int) {

Hello, { name }!

You are { strconv.Itoa(age) } years old

} ``` **Expression rules:** - `{ variable }` outputs text (auto-escaped) - Can call Go functions: `{ strings.ToUpper(name) }` - Must return string or implement `fmt.Stringer` ### HTML Elements Write HTML directly: ```templ templ Card(title string) {

{ title }

Content goes here

} ``` ### Attributes Static attributes: ```templ
``` Dynamic attributes: ```templ templ Button(id string, disabled bool) { } ``` **Attribute syntax:** - `attr={ value }` - dynamic value - `attr?={ bool }` - conditional attribute - Use quotes for static: `class="btn"` ### Conditional Rendering If/else: ```templ templ Alert(message string, isError bool) { if isError {
{ message }
} else {
{ message }
} } ``` Multiple conditions: ```templ templ Status(code int) { if code < 300 { Success } else if code < 400 { Redirect } else { Error } } ``` ### Loops For loop: ```templ templ List(items []string) { } ``` With index: ```templ templ NumberedList(items []string) {
    for i, item := range items {
  1. { strconv.Itoa(i+1) }. { item }
    2. }
} ``` ### Switch Statements ```templ templ Badge(status string) { switch status { case "active": Active case "pending": Pending case "inactive": Inactive default: Unknown } } ``` ### Component Composition Call other components with `@`: ```templ templ Layout(title string) { { title } @Header()
{ children... }
@Footer() } templ Header() {

My Site

} templ Footer() { } ``` **Usage:** ```templ templ HomePage() { @Layout("Home") {

Welcome to home page

} } ``` ### Children Accept child content: ```templ templ Card(title string) {

{ title }

{ children... }
} ``` Use: ```templ templ Profile() { @Card("User Profile") {

Name: John Doe

Email: john@example.com

} } ``` ### CSS Blocks Inline styles: ```templ templ StyledComponent() {
Styled content
} ``` ### Script Blocks Inline JavaScript: ```templ templ Interactive() { } ``` ### Comments Go-style comments: ```templ package components // Card component displays a card templ Card(title string) { // Main card container
{ /* This is a block comment */ }

{ title }

} ``` ## Quick Reference | Syntax | Purpose | Example | |--------|---------|---------| | `{ expr }` | Output expression | `{ name }` | | `attr={ val }` | Dynamic attribute | `id={ userId }` | | `attr?={ bool }` | Conditional attribute | `disabled?={ isDisabled }` | | `@Component()` | Call component | `@Header()` | | `{ children... }` | Accept children | `{ children... }` | | `if/else` | Conditional | `if isAdmin { }` | | `for range` | Loop | `for _, item := range items { }` | | `switch` | Switch statement | `switch status { case "ok": }` | ## Common Patterns ### Pattern 1: Conditional Classes ```templ templ Button(text string, isPrimary bool) { } ``` ### Pattern 2: List with Empty State ```templ templ ItemList(items []string) { if len(items) == 0 {

No items found

} else { } } ``` ### Pattern 3: Data Attributes ```templ templ DataCard(id string, value int) {
Content
} ``` ## Best Practices 1. **Keep components small** - One component, one purpose 2. **Use type-safe params** - Leverage Go's type system 3. **Avoid complex logic** - Move to Go functions 4. **Consistent naming** - PascalCase for exports 5. **Escape when needed** - Use `{ }` for auto-escaping ## Next Steps - **Build components** → Use `templ-components` skill - **Connect to HTTP** → Use `templ-http` skill - **Add interactivity** → Use `templ-htmx` skill --- > Converted and distributed by [TomeVault](https://tomevault.io/claim/ev3rlit) — claim your Tome and manage your conversions.