hudx - inspired by hmtx

Control multiple ajax calls and style changes via html attributes in a cli like manner.

hudx is heavily inspired by htmx and relies on the power of hypermedia. Htmx is awesome!!!

This small (200loc) package was created to add complex behaviour to a small widget for an existing website, which I was not able to achive easily with htmx.

Be warned: this is a toy project, not optimized for heavy interactions.

cdn:

<script src="https://unpkg.com/[email protected]"></script>

<div hudx hdx="click GET /some-html-response this outerHTML">
  replace me
</div>

npm:

npm install hudx --save

then

<div hudx hdx="click GET /some-html-response this outerHTML">
  replace me
</div>

import { hudxInit } from "hudx";

hudxInit();

or

import { hudx } from "hudx";

const element = document.createElement("div");
element.setAttribute("hudx", "");
element.setAttribute("hdx", "click GET /some-html-response this outerHTML");

hudx(element);

Examples:

Example source code

Live example content:

Insert response from the server

• Insert single element
• Insert multiple elements

Delete elements from the page

• Delete elements

Send data to the server and insert the response

• Send single form
• Send multiple forms

Style callbacks for request/response

• Style elements on request initiated
• Style elements on success received
• Style elements on error received
• Style elements on connection error

Style elements on DOM events

• Style elements

More examples

• Lazy loading image
• Edit customer data
• Modal example