Patterns

A catalog of reactive UI patterns built with LiveTemplate. Each pattern is a self-contained handler demonstrating a single idiom — forms, lists, navigation, real-time, and more.

Pattern detail pages open the live demo, served from a dedicated lt-patterns.fly.dev deployment of the livetemplate/examples/patterns/ app. The docs site reverse-proxies the demo so you can interact with each pattern without leaving this site.

The catalog below is rendered live from lt-patterns.fly.dev/api/index.json via tinkerdown's lvt-source REST binding. New patterns added to the upstream show up here on the next page load — no docs-site PR needed.

How this page works

This page is itself a recipe. The catalog above is not static markdown — it is a single lvt-source="patterns" block bound to a REST data source declared in the site's tinkerdown.yaml:

sources:
  patterns:
    type: rest
    from: https://lt-patterns.fly.dev/api/index.json
    result_path: categories
    cache:
      ttl: 5m

On every visit, tinkerdown:

1. Renders a <div class="loading">Connecting...</div> placeholder server-side
2. Establishes a WebSocket to the docs server
3. Server fetches /api/index.json (cached 5 minutes), exposes the JSON as .Data
4. Re-renders the inner template with the fetched data and patches it into the page

Adding a new pattern to the upstream examples/patterns app — and re-deploying it — automatically updates this catalog on the next visit. There is no docs-site PR required to keep the list in sync.

If you spot a mismatch between this catalog and what's actually served at /patterns/<category>/<slug>, the patterns app is canonical — open an issue or PR against livetemplate/examples.