website·Indexed 34 days ago
https://templ.guideA library for Go that allows developers to write HTML templates that compile to Go code. It supports components, server-side rendering with streaming, static site generation, and integration with tools like htmx, Chi, and Echo. The toolset includes a command-line tool for template generation and features for live reloading.
if, switch, for) and requires no JavaScript for its core functionality.templ.Handler renders the entire template to a buffer before writing it to the response. This ensures that if a template fails to render, the server can still set the appropriate HTTP response code and avoid sending a partial, broken response to the client.*_templ.go files to your source code repository. This ensures the codebase remains buildable (e.g., via go install) and usable as a dependency in other projects without requiring the end-user to run templ generate manually.To use React components within a templ application, follow an 'islands' architecture: templ renders the initial server-side HTML (including placeholder elements with specific IDs), and a client-side JavaScript bundle mounts the React components into those placeholders.
div elements with unique IDs where React components should be mounted.createRoot from react-dom/client to target those IDs and render the components.esbuild to bundle the JS/TSX and serve it as a static asset via a Go web server.// react/index.ts
import { createRoot } from 'react-dom/client';
import { Header } from './components';
const headerRoot = document.getElementById('react-header');
if (headerRoot) {
createRoot(headerRoot).render(<Header />);
}// components.templ
templ page() {
<html>
<body>
<div id="react-header"></div>
<script src="/static/index.js"></script>
</body>
</html>
}Attributes expecting URLs (e.g., href, src, action) are automatically sanitized when using dynamic values to prevent harmful protocols like javascript:. Unsafe URLs are replaced with about:invalid#TemplFailedSanitizationURL.
templ.SafeURL(myURL).hx-get): Use templ.URL(urlString) to manually sanitize.href="javascript:alert()") are not sanitized.// Automatic sanitization
<a href={ p.URL }>{ p.Name }</a>
// Manual sanitization for non-standard attributes
<div hx-get={ templ.URL(fmt.Sprintf("/contacts/%s/email", contact.ID)) }>
{ contact.Name }
</div>.templ files that are compiled into Go functions via the templ generate command. Each generated function returns a templ.Component interface. Components support HTML elements, text, expressions, branching (if, switch), and for loops. Visibility follows Go rules: components starting with an uppercase letter are public; others are private.// header.templ
package main
templ headerTemplate(name string) {
<header data-testid="headerTemplate">
<h1>{ name }</h1>
</header>
}https://github.com/templ-go/x/. These packages are provided without guarantees of stability, compatibility with future versions, or permanence; they may be removed at any time and should be used at the developer's own risk.The onion model separates the application into layers where each layer is unaware of the layer above it. This ensures a clear separation of concerns:
components (templ) to render HTML responses. It contains no business logic.For larger applications, a models package can be added for shared data structures (e.g., a User struct).
templ generate --watch command to automatically re-generate Go code from *.templ files and restart the web server when *.go files change. By adding the --proxy flag, templ runs an HTTP proxy (defaulting to localhost:7331) that injects JavaScript into the response to automatically reload the browser window without manual refreshing.templ generate --watch --proxy="http://localhost:8080" --cmd="go run ."To ensure a piece of content is rendered only once per page—even if the component containing it is called multiple times—use templ.NewOnceHandler(). This is typically used for <script>, <style>, or <link> tags.
Critical Warning: Do not call @templ.NewOnceHandler().Once() directly inside a component. This creates a new handler instance on every call, defeating the purpose and causing the content to be rendered multiple times. Instead, define the handler as a variable outside the component scope.
package once
// Define the handler outside the component to persist across renders
var helloHandle = templ.NewOnceHandler()
templ hello(label, name string) {
@helloHandle.Once() {
<script>
function hello(name) {
alert('Hello, ' + name + '!');
}
</script>
}
<input type="button" value={ label } data-name={ name } onclick="hello(this.getAttribute('data-name'))"/>
}<script> and <style> tags. These sections must contain only static content.templ Example() {
<script>
function showAlert() {
alert("hello");
}
</script>
<style type="text/css">
/* Only CSS is allowed */
</style>
}