Live demo — this example is server-driven; run the showcase locally for the interactive version.

Primary-detail

Master-detail. A list on the left selects what shows on the right — projects → metadata, services → endpoints table, anything. Either inline, or in a drawer that slides the detail in over the list.

Examples

List + detail

Simple-list on the left selects which item's metadata renders on the right.

Owner
Region
Status

Data-list + detail

Data-list on the left, detail panel with a table of related rows on the right.

Endpoint	Requests / min

Drawer detail

The list stays full-width; clicking an item slides the detail in from the right as an inline drawer panel.

Owner
Region
Status

Usage

For wide viewports show list + detail side-by-side; on narrow screens collapse to a stack with the list on top and the detail under it. Selection drives the right pane via HTMX — clicking a list item does hx-get targeting the detail panel.