Components

templ 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.

header.templ

package main

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

tip

Since templ produces Go code, you can share templates the same way that you share Go code - by sharing your Go module.

templ follows the same rules as Go. If a templ block starts with an uppercase letter, then it is public, otherwise, it is private.

Code-only components

Since templ Components ultimately implement the templ.Component, any code that implements the interface can be used in place of a templ component generated from a *.templ file.

package main

import (
	"context"
	"io"
	"os"

	"github.com/a-h/templ"
)

func button(text string) templ.Component {
	return templ.ComponentFunc(func(ctx context.Context, w io.Writer) error {
		_, err := io.WriteString(w, "<button>"+text+"</button>")
		return err
	})
}

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

Output

<button>
 Click me
</button>

warning

This code is unsafe! In code-only components, you're responsible for escaping the HTML content yourself, e.g. with the templ.EscapeString function.

Method components

templ components can be returned from methods (functions attached to types).

Go code:

package main

import "os"

type Data struct {
	message string
}

templ (d Data) Method() {
	<div>{ d.message }</div>
}

func main() {
	d := Data{
		message: "You can implement methods on a type.",
	}
	d.Method().Render(context.Background(), os.Stdout)
}

It is also possible to initialize a struct and call its component method inline.

package main

import "os"

type Data struct {
	message string
}

templ (d Data) Method() {
	<div>{ d.message }</div>
}

templ Message() {
    <div>
        @Data{
            message: "You can implement methods on a type.",
        }.Method()
    </div>
}

func main() {
	Message().Render(context.Background(), os.Stdout)
}