This project demonstrates how tempo works in a real-world Go + Templ setup.

It covers:

• ✅ Default project structure
• ⚙️ A typical development workflow
• 🎨 Component scaffolding with CSS and JS support
• 💡 Live reloading and code generation

We'll walk through building a Button component with a variant (outline) and some JavaScript to showcase how tempo handles styles and scripts together.

Make sure you have the following tools installed:

go install github.com/a-h/templ/cmd/templ@latest
go install github.com/indaco/tempo/cmd/tempo@latest
go install github.com/air-verse/air@latest

If you just want to see the final result in action:

1. Make sure you have the prerequisites installed:

2. Clone the repository:

   git clone https://github.com/indaco/tempo-demo.git
   cd tempo-demo
   
   go mod download

3. Run the dev server:

   make dev # or: task dev

4. Visit http://localhost:7331 in your browser.

The button component with live reload and asset sync is already set up — no extra configuration needed.

Try editing any CSS or JS file in the assets/ folder — tempo will sync the changes, and templ’s proxy will reload the browser for you.

The next section walks you through each step that was done to build this project from scratch using tempo, templ, and plain CSS/JS.

This section explains the full step-by-step process that was followed to build this project from scratch.

mkdir tempo-demo
cd tempo-demo

go mod init github.com/indaco/tempo-demo
go get github.com/a-h/templ@latest

tempo init

This creates a tempo.yaml config file. You can customize it by adding metadata like:

templates:
  user_data:
    author: John Doe
    year: 2025

tempo component define --js

This scaffolds template files under .tempo-files/templates. Optionally update .tempo-files/templates/component/templ/component.templ.gotxt with metadata comments for reference.

tempo component new --name button --js

This will create:

• assets/button – CSS and JS files
• components/button – Templ code

Write styles and scripts in the assets folder to bring your component to life.

tempo sync

This injects the contents of your CSS and JS into their corresponding .templ components.

templ fmt . && templ generate

Then clean up dependencies:

go mod tidy

make dev # or: task dev

Then visit: http://localhost:7331

This starts:

• templ in watch mode
• Asset syncing with live reload
• A hot-reloading Go server using air

Just edit and save any CSS or JS file in assets/ — tempo syncs your changes instantly, and templ’s proxy takes care of reloading the browser automatically.

Test your production-ready setup.

make build # or: task build

This will:

• Run tempo sync --prod (minifies and injects assets)
• Run templ fmt and templ generate
• Compile the Go binary into tmp/bin/tempo-demo

This project supports both a Makefile and a Taskfile.yaml. You can use whichever you prefer:

• Makefile:

  make help

• Taskfile:

  task --list-all

build:       # Build for production with minified asset files
dev:         # Run the dev server with live reload

This project is licensed under the MIT License – see the LICENSE file for details.