Templ Has a Free API You're Not Using

#go #webdev #templ #html

Templ is a Go HTML templating language with type safety, IDE support, and JSX-like syntax. It compiles templates to Go code — zero runtime overhead.

The Free APIs You're Missing

1. Components — Type-Safe HTML Functions

// components.templ
package components

templ Header(title string) {
    <header class="header">
        <h1>{title}</h1>
        <nav>
            <a href="/">Home</a>
            <a href="/about">About</a>
        </nav>
    </header>
}

templ UserCard(user User) {
    <div class="card">
        <img src={user.AvatarURL} alt={user.Name}/>
        <h3>{user.Name}</h3>
        <p>{user.Email}</p>
        if user.IsAdmin {
            <span class="badge">Admin</span>
        }
    </div>
}

Compile-time type checking. Misspelled field? Compiler error, not runtime bug.

2. Composition — Nested Components

templ Page(title string) {
    <!DOCTYPE html>
    <html>
    <head><title>{title}</title></head>
    <body>
        @Header(title)
        <main>
            { children... }
        </main>
        @Footer()
    </body>
    </html>
}

templ UsersPage(users []User) {
    @Page("Users") {
        <div class="grid">
            for _, user := range users {
                @UserCard(user)
            }
        </div>
    }
}

3. htmx Integration — Server-Side Interactivity

templ SearchInput() {
    <input type="search" name="q"
           hx-get="/api/search"
           hx-trigger="keyup changed delay:300ms"
           hx-target="#results"
           placeholder="Search users..."/>
    <div id="results"></div>
}

templ SearchResults(users []User) {
    for _, user := range users {
        @UserCard(user)
    }
    if len(users) == 0 {
        <p>No results found</p>
    }
}

4. CSS Components — Scoped Styles

css cardStyle() {
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    transition: transform 0.2s;
}

css cardHover() {
    transform: translateY(-2px);
}

templ Card(title string) {
    <div class={cardStyle()}>
        <h3>{title}</h3>
    </div>
}

5. Script Components — Type-Safe JavaScript

script copyToClipboard(text string) {
    navigator.clipboard.writeText(text).then(() => {
        alert("Copied: " + text);
    });
}

templ CopyButton(value string) {
    <button onclick={copyToClipboard(value)}>
        Copy
    </button>
}

Getting Started

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

Need data from any website delivered as clean JSON? I build production web scrapers that handle anti-bot, proxies, and rate limits. 77 scrapers running in production. Email me: Spinov001@gmail.com

Check out my awesome-web-scraping list for the best scraping tools and resources.