Client-side route

Interactive UI patterns without hydration

This page is intentionally all local state. Every panel here runs entirely in the browser with Alpine on top of plain server-rendered HTML.

Client onlyNo loaders•No actions•Press / to open the command panel

Accordion

The HTML is rendered once, then Alpine handles every interaction in-place. No loader data, no server round-trips, no component hydration.

Use them for local state: disclosure UIs, tabs, menus, filters, sortable lists, toast notifications, and temporary UI preferences.

Fetching data, mutating records, auth checks, and anything that must remain trusted or consistent across sessions.

Tabs

Alpine owns ephemeral state well: show or hide UI, keep small counters, hold open panels, and drive filters over static data already in the page.

Combine x-data, x-show, x-on, x-bind, and x-for to build useful islands without turning the whole page into a client app.

This works best when state is local and disposable. Once UI depends on shared server truth, move the source of truth back to loaders or actions.

Filterable gallery

Studio

design

Pulse

product

Orbit

engineering

North

design

Signal

product

Atlas

engineering

Quick actions

Live state

Active tab: overview
Open accordion: faq-1
Filter: all
Favorites: Studio, Orbit

Why this route exists

The other example pages mix server rendering with selective interactivity. This route isolates the browser-only part so people can evaluate Alpine patterns on their own.

Saved local UI preferences

Mock command panel