Plain Elements + HTMX

Component playground

Verify Plain Elements after HTMX swaps

Add and remove items in each section, then confirm keyboard support, ARIA, and custom events still work after HTMX updates the DOM. Data you add is stored for your browser only and expires automatically after one hour.

Tabs

2
Checkpoints
  • Click HTMX-added tab triggers and confirm panels switch
  • Confirm the indicator follows newly added tabs
  • After deleting a tab, remaining selection state stays intact
  • Confirm pe-tabs:change appears in the event log

Accordion

2
Checkpoints
  • Open and close added <details> items (single-open behavior)
  • Delete an item without breaking others
  • Operate summaries with keyboard (Enter / Space)

Collapsible

2
Checkpoints
  • Toggle HTMX-added pe-collapsible triggers
  • Confirm panel hidden and ARIA update correctly
  • Remaining collapsibles work independently after deletes
  • Confirm pe-collapsible:toggle appears in the event log

Dialog (nested)

1
Checkpoints
  • Open added parent dialogs; close with Esc or the close button
  • Open a nested child while the parent stays open; close only the child
  • After closing the child, focus returns to the trigger inside the parent
  • Confirm pe-dialog:open / close after HTMX adds dialogs

Tooltip

2
Checkpoints
  • Hover or focus added chips to show tooltips
  • Remaining tooltips work independently after deletes
  • Confirm pe-tooltip:open / close in the event log

Popover

1
Checkpoints
  • Open popovers from added buttons
  • Close with outside click, close button, or Esc
  • Other popovers keep working after deletes
  • Confirm pe-popover:open / close in the event log

Event log

HTMX and Plain Elements events in real time