htmx Interactivity

Use this skill when htmx handles server trips but the page still needs local browser behavior. Keep the ownership line explicit so server-rendered HTML and client-side state do not fight each other.

Ownership Rules

• htmx owns server requests, fragment swaps, history updates, and server-triggered events.
• The server owns durable state, validation, permissions, and canonical HTML.
• Alpine or plain JavaScript owns local state such as menu open/closed, tabs, disclosure state, temporary filters, focus helpers, and small transitions.
• _hyperscript is best for short event-driven behaviors attached to markup.
• Do not mirror the same durable state in both server data and a client store unless there is a reconciliation plan.

Use Alpine When

• A component has local state that changes without a server request.
• You need a dropdown, popover, modal shell, tab set, disclosure, or preview toggle.
• You need to coordinate htmx lifecycle events with UI state.
• The state naturally belongs near the markup and is simple enough to read inline.