Skip to main content

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>
}