HyperUX
Behavior-first Alpine.js patterns you can copy, adapt, and ship.
HyperUX is not about repackaging HTML elements and functionality as components. It focuses on developer-friendly APIs for behavior-heavy UI patterns you can adapt to your own markup and styles.
How to Use These Experiments
Each experiment includes live behavior and copy-ready output. Copy the HTML + JS, modify as needed for your project, and make it your own.
Each copy button grabs the live demo markup and the related Alpine registration code.
- Tailwind CSS is scaffolding. The examples use Tailwind only for the demo — it will copy with the HTML, but feel free to strip it out and use your own styles.
- Keep accessibility and keyboard behavior intact.
- Customize the Alpine code — add features, remove what you don't need, adapt naming and structure to fit your codebase.
- Found a bug or improvement? Open an issue to share what you learned. Bugs we fix, useful patterns we consider for all experiments.
Scroll Spy + TOC
This example demonstrates a scroll spy component that tracks the visibility of heading elements within a scrollable container and updates the active state of corresponding items in a table of contents (TOC) navigation. The TOC allows users to click on items to smoothly scroll to the associated heading within the content area.
Config Used for This Demo
huxScrollSpy()
Table of Contents
Getting Started
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequatur nobis error minus vel quisquam qui ipsam velit nostrum nihil, ab itaque aperiam modi aspernatur asperiores dolor vero voluptate eius quasi et iste accusantium tempora minima! Hic neque sit a esse?
Component Philosophy
Lorem ipsum dolor sit amet consectetur adipisicing elit. Asperiores ut enim iure. Tenetur corrupti iste quibusdam, illo delectus libero nemo cupiditate sequi ex, odit eos dolor totam maiores porro quisquam!
Copy-Paste Contract
Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur quas aliquam labore tempore, perspiciatis dignissimos? Magnam numquam natus saepe aliquid.
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Doloremque assumenda minima, id voluptatum nemo exercitationem!
Accessibility Basics
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab expedita quo quisquam, veritatis dignissimos placeat excepturi provident dicta eligendi ea voluptatibus neque ipsum consequuntur similique eveniet, animi, enim rerum dolor voluptatum itaque cupiditate! Iusto assumenda at voluptate corrupti voluptatum sed!
Keyboard Support
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Animi esse expedita aperiam quis veniam, iste repellat adipisci beatae. Voluptate reiciendis placeat eum sed harum ipsum, qui magni tenetur id accusantium.
Focus Return
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quibusdam, quia quis praesentium nihil iusto quas officia fugit ut similique a!
Authoring Patterns
Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam odit magnam expedita vitae! Vel, ratione. Error nostrum labore, cumque veritatis nemo quo at! Quo modi architecto, eligendi sint nesciunt illo obcaecati minima quasi odit, quod dolorem asperiores suscipit, animi dolor?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda numquam doloribus fugit ullam tenetur natus vel? Quas quaerat tenetur consectetur distinctio cumque labore obcaecati dolorem dolores eius possimus. Aperiam tempore eligendi veritatis aut, illum, soluta asperiores quaerat autem quae ipsa non distinctio. Reiciendis corrupti dolorem quasi tempore, quibusdam quae quis, quo necessitatibus commodi voluptates quaerat? Qui velit officiis aliquam voluptate.
Configuration Surface
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi impedit deserunt illo assumenda corrupti consectetur nulla modi nobis architecto natus!
All Options
Options: - headingSelector: string (default: 'h2, h3, h4, h5, h6') - templateRef: string (default: 'tocContent') - rootMargin: string (default: '0px 0px -60% 0px') - visibilityThreshold: number | number[] (default: 0.1)
Combobox
Searchable listbox input that follows the WAI-ARIA combobox pattern. Supports single or multiple selection, configurable template refs for input and listbox wiring, keyboard navigation, and outside-click close.
Config Used for This Demo
huxCombobox({
optionItems: ['Apple', 'Apricot', 'Banana', 'Blueberry', 'Cherry', 'Coconut'],
clearSelectionOnInputClear: true
})
No results.
All Options
Options: - optionItems: string[] (default: []) - acceptMultiple: boolean (default: false) - clearSelectionOnInputClear: boolean (default: false) - inputTemplateRef: string (default: 'comboboxInput') - listboxTemplateRef: string (default: 'comboboxListbox')
Copy to Clipboard
Utility component that copies multiple markup and value sources from live DOM elements by their data-hux-copy identifier. It preserves array order and joins sources using contentSeparator.
Config Used for This Demo
huxCopy({
sourceNames: ['copyExample', 'copyRegistrationCode']
})
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error quaerat obcaecati hic exercitationem? Libero unde dolorem est nostrum qui distinctio cum modi minima laudantium quia. Itaque consectetur totam adipisci magnam?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Possimus praesentium quasi aliquid molestiae at accusantium veritatis, minima dicta sed voluptatem.
All Options
Options: - sourceNames: string[] (default: []) - valueSourceNames: string[] (default: []) - contentSeparator: string (default: '\\n\\n') - timeoutDuration: number (default: 2000)
Dialog
Focus-trapped dialog with scroll locking, Escape dismiss, backdrop
dismiss, and focus restore on close. Uses the Alpine.js Focus plugin
for reliable keyboard containment via
x-trap.
Config Used for This Demo
huxDialog({
dialogId: 'delete-item-dialog'
})
Delete item
Are you sure you want to delete this item? This action cannot be undone.
All Options
Options:
- dialogId: string (optional, scopes emitted event names)
- isPersistent: boolean (default: false)
- isSeamless: boolean (default: false)
- trapFocus: boolean (default: true)
- startsOpen: boolean (default: false)
Events:
- hux-dialog:{dialogId}:open
- hux-dialog:{dialogId}:close
- hux-dialog:open (fallback when dialogId is missing)
- hux-dialog:close (fallback when dialogId is missing)
Command Palette
WIP
Keyboard-first action search with filtering, active item management, escape handling, and copy-paste friendly Alpine.js behavior.
This experiment is in progress. The goal is a practical command palette pattern that works for app actions, docs shortcuts, and search-driven navigation.
Want this sooner or have a use case? Open an issue.