sync

The sync command automates the injection of CSS and JS into .templ components.

Use it to:

• Keep styles and scripts separated from your components
• Automatically inject updated content into guard-marked sections
• Preserve your original source files — no overwrites

🚀 Basic Usage

tempo sync

This command scans your input directory for asset files (CSS/JS) and injects them into .templ files in your output directory.

What it does:

• Extracts CSS and JS from source files
• Injects into .templ files at guard-marked locations
• Keeps components up to date without manual copying.

🔧 Common Workflow

Every time you update a .css or .js file in assets/, run:

tempo sync

It will update matching .templ files under components/ — but leave your source files untouched.

Flags

--input value

The directory containing asset files (e.g., CSS, JS) to be processed (default: assets)

--output value

The directory containing the `.templ` component files where assets will be injected (default: components)

--exclude value

Subfolder (relative to input directory) to exclude from the processing

--workers value

Number of concurrent workers processing asset files (default: numCPUs * 2)

--prod

Enable production mode, minifying the injected content (default: false)

--force

Force processing of all files, ignoring modification timestamps (default: false)

--summary (-s) value

Specify the summary format: text, json, or none (default: "text")

--verbose

Show detailed information in the summary report (default: false)

--report-file (--rf) value

Export the summary to a JSON file

TIP

Live Reload: If you're using a live reload tool like air, templier, or watchexec, pass --summary none to reduce noise in the terminal.

NOTE

Not using scaffolding? 👉 Standalone Sync Guide.