templ language preview

1. Component with control flow

Go-flavored control flow and component composition

horizon-dark

package components

import "fmt"

templ UserCard(name string, isAdmin bool) {
	<div class="card">
		<h2>{ name }</h2>
		if isAdmin {
			<span class="badge">Admin</span>
		}
		<ul>
			for _, role := range roles {
				<li>{ role }</li>
			}
		</ul>
		@Footer()
	</div>
}

templ Footer() {
	<footer>{ fmt.Sprintf("© %d", 2024) }</footer>
}

atom-one-dark

package components

import "fmt"

templ UserCard(name string, isAdmin bool) {
	<div class="card">
		<h2>{ name }</h2>
		if isAdmin {
			<span class="badge">Admin</span>
		}
		<ul>
			for _, role := range roles {
				<li>{ role }</li>
			}
		</ul>
		@Footer()
	</div>
}

templ Footer() {
	<footer>{ fmt.Sprintf("© %d", 2024) }</footer>
}

github-dark

package components

import "fmt"

templ UserCard(name string, isAdmin bool) {
	<div class="card">
		<h2>{ name }</h2>
		if isAdmin {
			<span class="badge">Admin</span>
		}
		<ul>
			for _, role := range roles {
				<li>{ role }</li>
			}
		</ul>
		@Footer()
	</div>
}

templ Footer() {
	<footer>{ fmt.Sprintf("© %d", 2024) }</footer>
}

dracula

package components

import "fmt"

templ UserCard(name string, isAdmin bool) {
	<div class="card">
		<h2>{ name }</h2>
		if isAdmin {
			<span class="badge">Admin</span>
		}
		<ul>
			for _, role := range roles {
				<li>{ role }</li>
			}
		</ul>
		@Footer()
	</div>
}

templ Footer() {
	<footer>{ fmt.Sprintf("© %d", 2024) }</footer>
}

nord

package components

import "fmt"

templ UserCard(name string, isAdmin bool) {
	<div class="card">
		<h2>{ name }</h2>
		if isAdmin {
			<span class="badge">Admin</span>
		}
		<ul>
			for _, role := range roles {
				<li>{ role }</li>
			}
		</ul>
		@Footer()
	</div>
}

templ Footer() {
	<footer>{ fmt.Sprintf("© %d", 2024) }</footer>
}

github

package components

import "fmt"

templ UserCard(name string, isAdmin bool) {
	<div class="card">
		<h2>{ name }</h2>
		if isAdmin {
			<span class="badge">Admin</span>
		}
		<ul>
			for _, role := range roles {
				<li>{ role }</li>
			}
		</ul>
		@Footer()
	</div>
}

templ Footer() {
	<footer>{ fmt.Sprintf("© %d", 2024) }</footer>
}

2. Script component

a legacy script block with a nested if statement

horizon-dark

script confirmDelete(name string) {
	if (confirm("Delete " + name + "?")) {
		fetch("/delete/" + name, { method: "POST" });
	}
}

atom-one-dark

script confirmDelete(name string) {
	if (confirm("Delete " + name + "?")) {
		fetch("/delete/" + name, { method: "POST" });
	}
}

github-dark

script confirmDelete(name string) {
	if (confirm("Delete " + name + "?")) {
		fetch("/delete/" + name, { method: "POST" });
	}
}

dracula

script confirmDelete(name string) {
	if (confirm("Delete " + name + "?")) {
		fetch("/delete/" + name, { method: "POST" });
	}
}

nord

script confirmDelete(name string) {
	if (confirm("Delete " + name + "?")) {
		fetch("/delete/" + name, { method: "POST" });
	}
}

github

script confirmDelete(name string) {
	if (confirm("Delete " + name + "?")) {
		fetch("/delete/" + name, { method: "POST" });
	}
}

3. CSS component

type-safe inline styles with Go expression interpolation

horizon-dark

css cardStyle(active bool) {
	background-color: { templ.SafeCSSProperty(color) };
	padding: 12px;
	border-radius: 8px;
}

atom-one-dark

css cardStyle(active bool) {
	background-color: { templ.SafeCSSProperty(color) };
	padding: 12px;
	border-radius: 8px;
}

github-dark

css cardStyle(active bool) {
	background-color: { templ.SafeCSSProperty(color) };
	padding: 12px;
	border-radius: 8px;
}

dracula

css cardStyle(active bool) {
	background-color: { templ.SafeCSSProperty(color) };
	padding: 12px;
	border-radius: 8px;
}

nord

css cardStyle(active bool) {
	background-color: { templ.SafeCSSProperty(color) };
	padding: 12px;
	border-radius: 8px;
}

github

css cardStyle(active bool) {
	background-color: { templ.SafeCSSProperty(color) };
	padding: 12px;
	border-radius: 8px;
}