A Templ Cheat Sheet for Syntax Components and Helpers

package main

import (
	"fmt"
	"strings"
)

type User struct {
	Name  string
	Admin bool
	Tags  []string
}

css highlight() {
	background-color: #fffbdd;
	border-left: 4px solid #d4a72c;
}

script confirmDelete(name string) {
	return confirm("Delete " + name + "?");
}

templ Card(title string) {
	<section class="card">
		<h2>{ title }</h2>
		{ children... }
	</section>
}

templ Badge(label string, attrs templ.Attributes) {
	<span class="badge" { attrs... }>{ label }</span>
}

templ Everything(u User, items []string, kind string) {
	// a Go comment: not in the output
	<!-- an HTML comment: in the output -->
	{{ upper := strings.ToUpper(u.Name) }}
	@Card("Profile") {
		<p>{ upper } has { fmt.Sprint(len(items)) } items</p>
		if u.Admin {
			@Badge("admin", templ.Attributes{"data-level": "2"})
		} else {
			@Badge("member", nil)
		}
		switch kind {
			case "a":
				<p>kind A</p>
			case "b":
				<p>kind B</p>
			default:
				<p>other kind</p>
		}
		<ul class={ "list", templ.KV("empty", len(items) == 0) }>
			for i, it := range items {
				<li data-i={ fmt.Sprint(i) } id={ "item-" + it }>{ it }</li>
			}
		</ul>
		<a href={ templ.URL("/users/" + u.Name) } class={ highlight() }>profile</a>
		<button type="button" onclick={ confirmDelete(u.Name) }>Delete</button>
		<input value={ u.Name } disabled?={ !u.Admin } required?={ true }/>
		@templ.Fragment("tags") {
			<p>
				for _, t := range u.Tags {
					<em>{ t }</em>
				}
			</p>
		}
		@templ.Raw("<hr/>")
	}
}

package main

import (
	"context"
	"fmt"
	"strings"
)

func main() {
	var sb strings.Builder
	err := Everything(User{Name: "ada", Admin: true, Tags: []string{"go", "web"}}, []string{"x", "y"}, "b").Render(context.Background(), &sb)
	if err != nil {
		panic(err)
	}
	fmt.Println(strings.ReplaceAll(sb.String(), "><", ">\n<"))
}

go get github.com/a-h/[email protected] >/dev/null 2>&1
go get -tool github.com/a-h/templ/cmd/[email protected] >/dev/null 2>&1
go tool templ generate >/dev/null 2>&1
go run .

<!-- an HTML comment: in the output -->
<section class="card">
<h2>Profile</h2>
<p>ADA has 2 items</p>
<span class="badge" data-level="2">admin</span> <p>kind B</p> <ul class="list">
<li data-i="0" id="item-x">x</li>
<li data-i="1" id="item-y">y</li>
</ul>
<style type="text/css">.highlight_b768e7b3{background-color:#fffbdd;border-left:4px solid #d4a72c;}</style>
<a href="/users/ada" class="highlight_b768e7b3">profile</a> <script>function __templ_confirmDelete_9e4a(name){return confirm("Delete " + name + "?");
}</script>
<button type="button" onclick="__templ_confirmDelete_9e4a(&#34;ada&#34;)">Delete</button> <input value="ada" required>
<p>
<em>go</em>
<em>web</em>
</p> <hr/>
</section>