Go Templ Development Setup

In this short tutorial, we will setup automatic regeneration of templates when changes are detected in our template files when using the a-h/templ module.

The templ module in Golang is a powerful and flexible templating library designed to simplify the process of generating HTML in Go applications. Unlike traditional templating systems that rely on separate template files and complex syntax, templ leverages Go’s native syntax and type safety, offering a more seamless and intuitive way to create dynamic HTML content. Some of the key features of templ include

• Type Safety: By using Go’s type system, templ ensures that your templates are type-checked at compile time, reducing runtime errors and improving code reliability.

• Integrated Syntax: Templates are written directly in Go, using familiar constructs and syntax, which eliminates the need to learn a new templating language and reduces context switching.

• Performance: Since templates are compiled to Go code, they benefit from Go’s performance characteristics, resulting in fast and efficient template rendering.

• Flexibility: The library supports complex templating scenarios, including loops, conditionals, and template inheritance, making it suitable for a wide range of use cases from simple pages to complex web applications.

In order to get started with templ, we need to install the templ command line tool:

go install github.com/a-h/templ/cmd/templ@latest

Note that you need Go version 1.20 or greater in order to use go install for the package.

Within a Go project, we also get the templ package using go get -u github.com/a-h/templ in order to be able to import it within our own packages.

The setup

A templ component is placed in a file with the extension .templ. Within the file we define a package name and functions using the the templ keyword:

views/mypackage/my_component.templ

package mypackage

templ MyComponent(name string) {
  <div>
    hello { name }
  </div>
}

When our component is done, we can run templ generate in the command line to generate Go files that can be used to render the component. Basically for the benefits listed above, we add another build step in order to deploy our application. Running this command manually every time we make changes doesn’t sound like a fun time. Luckily templ provides a few command line flags that can be used to automate the generation step:

templ generate -watch -proxy=http://localhost:8080

Running the generation command like this will regenerate the templates when changes are detected. Additionally, depending on your setup, you may also want to add the -open-browser=false flag in order to prevent the command from opening a default browser. With this setup, templ becomes a much more developer friendly experience.