Example applications demonstrating LiveTemplate usage with various features and patterns.
The todo app demonstrates LiveTemplate's core features in ~150 lines of Go + ~80 lines of HTML:
- Real-time sync — open two tabs as the same user; changes appear instantly via
Sync() - Standard HTML forms —
<form method="POST" name="add">routes toAdd()with zero configuration - Live search & sort —
Change()auto-wires input events with 300ms debounce - Validation —
ErrorTag,AriaInvalid,AriaDisabledtemplate helpers - Components — modal confirmation dialogs and toast notifications
- Entry animations —
lvt-fx:animate="fade"on new rows - Loading states —
lvt-el:setAttr:on:add:pending="aria-busy:true"for visual feedback - Dark mode — automatic via
<meta name="color-scheme" content="light dark"> - Progressive enhancement — standard form actions use HTTP POST fallback; live search/sort and other reactive interactions are enhanced by JavaScript
All examples follow the progressive complexity model. Tier 1 (standard HTML) is preferred; Tier 2 (lvt-* attributes) is used only when necessary.
| 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 |
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+2 | File upload with progress | lvt-upload |
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 directories listed in the table above are individual example applications. Each folder contains a minimal, self-contained project that demonstrates a specific LiveTemplate pattern or feature.
Each example is self-contained with its own go.mod. To run an example:
cd <example-directory>
go mod download
go run main.goRun all working examples at once:
./test-all.shThis script will:
- Test all 5 working examples (counter, chat, todos, graceful-shutdown, testing)
- Skip disabled examples by default (use without
--skip-disabledto attempt them) - Show a summary of passed/failed/skipped tests
Examples include E2E tests using Chromedp:
cd <example-directory>
go test -vThe test script is also used in GitHub Actions. See .github/workflows/test.yml for CI configuration.
Examples are configured to use the CDN version of the client library:
<script src="https://cdn.jsdelivr.net/npm/@livetemplate/client@0.1.0/dist/livetemplate-client.browser.js"></script>For local development, examples can serve the client library locally using github.com/livetemplate/lvt/testing.
- Core Library:
github.com/livetemplate/livetemplate v0.8.15 - LVT Testing (for examples with E2E tests):
github.com/livetemplate/lvt(latest) - Client Library:
@livetemplate/client@latest(via CDN)
- LiveTemplate Core - Go library for server-side rendering
- Client Library - TypeScript client for browsers
- LVT CLI - Code generator and development server
Examples follow the LiveTemplate core library's major.minor version:
- Core:
v0.1.5→ Examples:v0.1.x(any patch version) - Core:
v0.2.0→ Examples:v0.2.0(must match major.minor)
See CONTRIBUTING.md for guidelines on adding new examples.
MIT License - see LICENSE for details.