This is an experimental work in progress, do NOT use (yet)!
ahx is a set of HTML & CSS extensions to allow augmentation of a web app, by an untrusted third party HTTP service. It forms part of a larger addon system.
It is heavily based on htmx, but is much more restrictive, in that it does NOT allow any kind of scripting.
ahx is not designed as an alternative for htmx, it's a system to allow third party hypermedia to be seamlessly integrated into a host web application, using the declarative concepts of htmx.
So if you aren't familiar with htmx, it's worth checking it out first, and then come back here.
I also recommend reading Hypermedia Systems.
The main way for a third party to declare it's intentions and provide it's augmentations is via a set of CSS rule extensions. This is where ahx really diverges from regular htmx behaviour.
This is easiest to explain with an example, here we have a snippet of CSS supplied from a third party that declares that it want's to load some additional content appended into the table row.
table.stuff tbody tr {
--ahx-trigger: load once;
--ahx-get: url("./extra-stuff-td");
--ahx-swap: beforeEnd;
}Well we did initially use htmx in our proof of concept, but we had to add extensions to deal with CSS rules and mutations from other frameworks. htmx is designed to provide the rich hypermedia experience to the host app, and has a certain degree of configurability built in. If we used htmx itself for the augmented hypermedia we'd need to lock down the configuration, this would be problematic if the host app wanted to also use htmx. We wouldn't want to clash with that.
Also, our system relies heavily on applying hypermedia controls via rules and not just attributes, and needs to work seamless with any other frontend frameworks, relying heavily on observation of DOM mutations.
No, the core of ahx has been written from the ground up. It does attempt to follow htmx concepts and conventions as closely as possible where appropriate.
ahx is written in modular TypeScript, and uses Deno for tooling.
- Concepts
- Comparison to htmx features
- CSS properties
- Element attributes
- Custom events
- Custom headers
- Data harvesting
- Debugging and inspection tools
What differentiates Augmented Hypermedia from just Hypermedia is the ability to declare hypermedia controls as a set of rules to be applied to a document, and not just as inline controls within the document.
In the case of ahx, we use CSS to represent the rules, but there is no reason the rules couldn't take some other form if necessary.