Templ of Horse Lasers HTMX Example

A GO based HTMX example library. See how different types of server and client state updates can happen with HTMX and Hyperscript.

Stack

• HTMX
• Hyperscript
• Templ
• Tailwind
• GORM
• SQLite
• Air

HTMX and Hyperscript libraries are stored locally in the .dist folder.

Developer Experience Issues

• The VSCode extensions htmx-tags and _hyperscript don't appear to work with templ files
• Changing templ file association to be seen as html breaks the templ-vscode extension integration
• For now, this project prefers to have templ-vscode working
• Follow this github issue for details from templ

Frontend

When the server is running, the GO Echo endpoints will return the entire HTML document. HTMX attributes will request and update portions of the document. No separate frontend repo or client app is required.

TEMPL: HTML Templating Engine

This example uses the TEMPL templating engine to create and deliver HTML UX components to the requesting client.

Tailwind Styles

This project uses tailwind for styling shortcuts, and to compile the tailwind.css file for styles.

Compiling & Hot Reloading with Air

This GO project uses air for hot reloading. The .air.toml file is configured according to the templ hot reloading instructions for air with the --proxy flag to automatically reload pages when changes are detected. HOWEVER this does not currently work with air, and manual browser refresh is required after changes.

The cmd in the .air.toml handles generating the templ files and generating the tailwind.css file.

Hyperscript - For Client Interactivity

• For interactivity that does not need to go through the server, this project uses Hyperscript.
• This is great for pure UX state (such as toggling ux element visibility) without needing a state management library

Database - GORM + SQLite In Memory

• This project uses GORM to interact with the database and comes with an in-memory implementation of SQLite
• The leaderboard example stores these values in the in-memory SQLite database

Development

VS Code:

See the .vscode/settings.json for optimizations that have been added for improved developer experience.

• "editor.formatOnSave" entry adds support for templ file formatting and tailwind integration
• "files.associations" entry addition allows the vscode htmx-tags extension to work on .templ files

Runners:

Open terminal sessions for each of these hot reloading / watching processes to auto-restart the server on change, and to auto-rebuild the templ templates when they are updated.

# Install required node dependencies
$ npm i

# Start the hot reloading GO dev server
# The .air.toml includes commands to watch and generate templ and tailwind css files
$ air

# OPTIONAL - Run the invididual runners separately
# Tailwind compile and watch for changes
$ npx tailwindcss -o ./dist/tailwind.css --watch

# templ template changes / autogenerate and watch for changes
# the --proxy flag auto-reloads the browser
$ templ generate --proxy http://localhost:1323 --watch

Production

# Optimize Tailwind styles with minification
$ npx tailwindcss -o ./dist/tailwind.css --minify