App Recipes

Runnable application recipes demonstrating LiveTemplate usage with various features and patterns. Each page documents an app under examples/ in this repository — you edit the app and its page together, so a change to one turns up in review beside the other.

Showcase: the todo app

The todo app demonstrates LiveTemplate's core features in ~150 lines of Go + ~80 lines of HTML:

Progressive complexity

All examples follow the progressive complexity model. Prefer Tier 1 (standard HTML); reach for Tier 2 (lvt-* attributes) only when HTML cannot express the interaction.

Example Tier Description Tier 2 Attributes
counter/ 1 Counter with logging + graceful shutdown None
chat/ 1+2 Real-time multi-user chat lvt-fx:scroll
seat-picker/ 1 Cross-user real-time seat booking (different users, shared topic) None
file-tree/ 1 Recursive template — a directory tree whose template invokes itself; deep edits scope to one leaf None
todos/ 1+2 Full CRUD with SQLite, auth, modal + toast components lvt-on:change, lvt-fx:animate, lvt-fx:highlight, lvt-el:setAttr
flash-messages/ 1 Flash notification patterns None
avatar-upload/ 1 File upload on the ordinary form submit (Volume mode) — a plain file input, no upload attribute None
upload-autoupload/ 1+2 Upload that fires on file selection, streaming over the WebSocket lvt-upload
upload-modes/ 1+2 Four upload modes (Volume/Direct/Proxied/Preview), one input lvt-upload, lvt-upload-with
progressive-enhancement/ 1 Works with/without JS None
ws-disabled/ 1 HTTP-only mode None
live-preview/ 1 Change() live updates None
login/ 1+2 Authentication + sessions lvt-form:no-intercept
shared-notepad/ 1+2 BasicAuth + SharedState lvt-form:preserve
dialog-patterns/ 1 Native <dialog> with command/commandfor None (polyfilled by client)

The recipes

The directories listed in the table above are individual app recipes. Each folder contains a minimal, self-contained project that demonstrates a specific LiveTemplate pattern or feature.

Running them

Each example is self-contained with its own go.mod. To run an example:

cd <example-directory>
go mod download
go run main.go

Testing them

Test all of them

Run all working examples at once:

./test-all.sh

This script will:

Test one

App recipes include E2E tests using Chromedp:

cd <example-directory>
go test -v

CI/CD

The test script is also used in GitHub Actions. See .github/workflows/test.yml for CI configuration.

Using the client library

Production (CDN)

App recipes load the client through the framework-provided template functions, which render the CDN URL for the bundle this server release is wire-compatible with — pinned, never @latest:

<link rel="stylesheet" href="{{lvtClientStyleURL}}">
<script defer src="{{lvtClientScriptURL}}"></script>

Development (local)

For local development, examples can serve the client library locally using github.com/livetemplate/lvt/testing.

Dependencies

Version synchronization

App recipes follow the LiveTemplate core library's major.minor version:

Contributing

See CONTRIBUTING.md for guidelines on adding new examples.

License

MIT License - see LICENSE for details.

source: livetemplate/docs · path: content/recipes/apps/index.md