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.
Last updated: 5 April 2026
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.
huxScrollSpy({
headingSelector: 'h2, h3, h4, h5, h6',
templateRef: 'tocContent',
rootMargin: '0px 0px -60% 0px',
threshold: 0.1
})
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!
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.
huxCombobox({
optionItems: [],
acceptMultiple: false,
clearSelectionOnInputClear: false,
inputTemplateRef: 'comboboxInput',
listboxTemplateRef: 'comboboxListbox'
})
No results.
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.
huxCopy({
sourceNames: ['exampleElement', 'exampleScript'],
valueSourceNames: ['exampleInput'],
contentSeparator: '\n\n',
timeoutDuration: 2000
})
This is an example of copyable content. When you click the copy button, it will grab the HTML from this paragraph and the one to the right, as well as the value from the input below, and copy it all to your clipboard together.
This content is separate from the copy source, so you can structure your markup in a way that makes sense for your UI, and still have a clean copy-paste output.
Command Palette
Work in Progress
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.
Dialog
Work in Progress
Modal and drawer behavior with focus management, escape close, restore focus, and scroll locking.
This experiment is in progress. The target is a behavior-first dialog pattern that can be adapted to modals, side panels, and confirmation flows.