Templ Syntax

This is a guide for the syntax of the templ tool for golang templating. Templ is a golang templating library.

Basic Syntax

Basic syntax

Package name and imports

templ files start with a package name, followed by any required imports, just like Go.

package main

import "fmt"
import "time"

Components

templ files can also contain components. Components are markup and code that is compiled into functions that return a templ.Component interface by running the templ generate command.

Components can contain templ elements that render HTML, text, expressions that output text or include other templates, and branching statements such as if and switch, and for loops.

package main

templ headerTemplate(name string) {
  <header data-testid="headerTemplate">
    <h1>{ name }</h1>
  </header>
}

Go code

Outside of templ Components, templ files are ordinary Go code.

package main

// Ordinary Go code that we can use in our Component.
var greeting = "Welcome!"

// templ Component
templ headerTemplate(name string) {
  <header>
    <h1>{ name }</h1>
    <h2>"{ greeting }" comes from ordinary Go code</h2>
  </header>
}

Elements

templ elements are used to render HTML within templ components.

package main

templ button(text string) {
	<button class="button">{ text }</button>
}

package main

import (
	"context"
	"os"
)

func main() {
	button("Click me").Render(context.Background(), os.Stdout)
}

<button class="button">
 Click me
</button>

:::info templ automatically minifies HTML responses, output is shown formatted for readability. :::

Tags must be closed

Unlike HTML, templ requires that all HTML elements are closed with either a closing tag (</a>), or by using a self-closing element (<hr/>).

templ is aware of which HTML elements are "void", and will not include the closing / in the output HTML.

package main

templ component() {
	<div>Test</div>
	<img src="images/test.png"/>
	<br/>
}

<div>Test</div>
<img src="images/test.png">
<br>

Attributes and elements can contain expressions

templ elements can contain placeholder expressions for attributes and content.

package main

templ button(name string, content string) {
	<button value={ name }>{ content }</button>
}

Rendering the component to stdout, we can see the results.

func main() {
	component := button("John", "Say Hello")
	component.Render(context.Background(), os.Stdout)
}

<button value="John">Say Hello</button>

2.8 KiB Raw Blame History