---
id: NS-0004
type: northstar
status: ready
title: html_examples index and per-example pages
refs:
  - AGENTS.md
  - REQUIREMENTS.md
  - examples/html_examples/README.md
  - examples/html_examples/src/main.rs
  - examples/html_examples/templates/app_shell.heml
  - examples/html_examples/templates/gallery.heml
  - hemx-xtask/src/main.rs
---

## Objective

Make `examples/html_examples` behave like a copy-pasteable pattern gallery instead of one long demo page: `/` is an index with navigation, each implemented htmx-style pattern has a focused page using the exact htmx slug as the visible name, and `infinite-scroll` is proved by real scrolling rather than a click-only load-more control.

## Authority

- `AGENTS.md` says `examples/html_examples` is the copy-paste HTML pattern gallery for htmx-style examples, with exact htmx URL slugs visible and behavior translated to boring `.heml`, generated resources, and server-owned Rust state. req: htmx_equivalents/001 req: htmx_equivalents/003 req: htmx_equivalents/005 req: examples/005 req: examples/007 req: examples/012 req: page_swap/007 req: page_swap/008
- `examples/html_examples/README.md` defines the pattern matrix, current implemented/deferred/refused boundaries, and the stable run/open command.
- `examples/html_examples/src/main.rs` and `templates/gallery.heml` currently render all implemented examples on `/`, including `infinite-scroll` as a revealed form with a visible `Reveal more rows` button.
- `hemx-xtask/src/main.rs` owns the focused browser smoke command that must prove no-reload dynamic interactions and the html_examples runtime path. req: test/006

## Close when

- `/` is an index/landing page, not the long live example gallery.
- Implemented examples have focused routes/pages whose visible names preserve the htmx example slugs from the README matrix.
- `infinite-scroll` lives on its own focused page and is primarily exercised by scrolling to a sentinel, not by clicking a load-more button.
- README, smoke, and any requirement/doc changes keep the run command, pattern matrix, and verification authority honest.
- Any real product decision needed before implementation is captured as a blocked slice with the exact missing decision.

## Verification

- `workledger check`
- `workledger list`
- `cargo test -p hemx-html-examples`
- `cargo test -p hemx-xtask`
- `cargo run -p hemx-xtask -- html-examples-smoke`
- `redgate health --strict && redgate lint`

## Non-goals

- Do not create a router framework, docs generator, client component runtime, selector-targeting model, or second browser runner.
- Do not promote deferred/integration-owned/refused README rows unless a later slice proves the full vertical behavior.
- Do not hide click-to-load behavior inside `infinite-scroll`; keep click-triggered loading and scroll-triggered loading as distinct examples.

## Evidence

- Work mapping created at HEAD `379ed02`; implementation slices should update this section only when they complete or block.