Why hyperComponents

hyperComponents leverages three state-of-the-art utility libraries that facilitate building dynamic user interfaces without leaning upon large and complex JavaScript frameworks.

1. HTMX: A fast, small, and feature-rich library for issuing AJAX requests from any DOM element with flexible updating of the DOM using hypermedia exchanges.
2. HyperScript: An client side scripting language with English-prose syntax for adding rich event management and interactivity to web pages.
3. TailwindCSS: A comprehensive styling library of based on discrete utility classes.

All these libraries advance the Locality of Behavior principle by centralizing the code base at the intended target of those actions, improving code understanding and maintenance.

In the examples provided, Ajax (XHR) requests are issued, and DOM updates performed by either HTMX or the equivalent fetch command exposed byHyperScript.

Interactivity on the client side is provided exclusively by HyperScript.

Both of these libraries support extensive event listening and management, including standard system events, library specific events and user-defined custom events.

Elegant and responsive styling is provided by the popular utility class approach of Tailwind.css.

And finally, the Vite-base Astro build tool wraps everything neatly together by providing simple component architecture, file-based routing, and custom API endpoints which makes it an ideal tool for sending hypermedia responses to AJAX requests.

By making all hyperComponents source code public, with copy and paste directly into your project, the techniques implemented by these powerful libraries can be both instructional and functional.