HTMX

Attributes

hx-[delete|get|patch|post|put] - AJAX method to use
hx-swap
- innerHTML - Default, replace hx-target inner html.
- outerHTML - Replace the hx-target itself
- beforebegin - Insert before hx-target
- afterbegin - Insert before hx-target first child
- beforeend - Insert after hx-target last child
- afterend - Insert response after hx-target
- delete - Deletes hx-target regardless of the response.
- none - No swap.
hx-target: CSS selector for hx-swap action
hx-trigger: comma-separated list of events triggering a request, often the default:
- On input, textarea, select: change
- On form: submit
- On all other elements: click
- Filters:
  - in [] after the event name
  - Example: keyup[ctrlKey && key == 'l'] to catch CTRL-L
- Specify event source with from:<extended CSS selector>,
  - defaults to current element
  - Example: from:body to receive events from the whole body
- Complete spec: https://htmx.org/attributes/hx-trigger/
hx-include:
- when hx-post-ing outside a form, specify which elements to include, as if they had been in a form along with the posting button
- supports matching on multiple comma-separated selectors
hx-vals: value as a JSON string or JS dynamic value
- example: hx-vals='{"state":"MT"}'
- example: hx-vals='js:{"state":getCurrentState()}'

support multiple comma-separated selectors, but...
- hx-target: return first matching element from first selector (?)
- hx-trigger from: and hx-include: return first matching child
relative selectors:
- closest: closest parent matching selector
- (previous|next):: previous or next element (not necessarily sibling) matching selector
- find: next child matching selector
- this: the current element