And how would those "Islands" be embedded into my Go + HTMX for example?

I would invoke a request from React app, and render the content inside the island?

This does technically work for my app, but I am trying to come up with a more general solution for complicated forms haha. In those cases I'm trying to move form validation and dynamicness to the backend language I work with.

I think the most ideal solution is the last example of https://htmx.org/attributes/hx-sync/, but even that example has a bug where latency can cause input to be overwritten

I think what I want is a

throttle

or

delay

on hx-sync that cancels in flight requests the moment any input has taken place, but doesn't send a new request until the throttle or delay has finished. I think that guarantees no input be overwritten due to latency

well yes.. you can get server-rendered react or just load the js and attach it to a specific DIV to do it's job. https://www.patterns.dev/posts/islands-architecture You can also accomplish a good amount by using Alpine.js that plays well with HTMX (has plugin for it afaik) and does much of what React does without the compilation and having a ReactApp server at all. https://alpinejs.dev/ of course if you really have to you're free to use react 🙂

Thank you very much! I'm a full stack dev, and I'm kinda sick of hearing words like

State Management

,

hooks

and so on 😄 I'm pretty excited to give this a go

I am the same way. (already giving it a go...) spent the last 6 years in full or partial work in Vue and Angular :3 They are an overkill almost all the time. Even the apps that DO need a reactive framework don't need it all over the place.

Yep, this is also how I feel 😄

Playing around with Django, htmx, and crispy-forms and Django-forms-dynamic to do some pretty neat form stuff (demo/write up a few weeks out - but like individual field changes trigger interactions with other parts of the form). I don’t know any other frameworks other than Django; what are your experiences with robustness of forms and form libraries in other languages and frameworks?

what's the recommended pattern when you need a change in one element to launch get requests (same data, a UUID) to another two separate elements? I figure I can only set one hx-target

you can update more than one target with the same response fragment: https://htmx.org/attributes/hx-swap-oob/

thanks ! guess I'm a oob noob

Once you know it exists it gets easier 😉

do I format oob like this for multiple elements

hx-swap-oob="#cssA, #cssB, #cssC"

? sorry couldn't find in the docs

it depends on what the desired effect is. e.g.

html
<div>normal target</div>
<div id="cssA" hx-swap-oob="true">...</div>
<div id="cssB" hx-swap-oob="true">...</div>
<div id="cssC" hx-swap-oob="true">...</div>

when a new option selected in original dropdown I'm trying to refresh multiple downstream elements with a new ID

the id needs to remain stable, that's how the oob mechanism knows what the targets are

sorry I mean I'm passing the ID (key:val pairs) downstream to a few different targets (which their CSS IDs remain stable). e.g. Select option B, pass ID=B to #cssA, #cssB.

omg pls disregard, I got it working. oob is amazing, htmx is amazing and I'm never going back

https://htmx.org/docs/#oob_swaps https://htmx.org/attributes/hx-swap-oob/ 🙂

Im having a strange issue with bulmacss modals and oob swap. Basically I would like to return the modal with normal request and update another element with the oob swap. But for some reason the modal gets closed immediately after the oob swap occurs. The element to be swapped already exists in the dom and has unique div id. Any ideas?

The closing normally occurs with event on a close button

try slowing down the settle time of the swapping operation (e.g. 10s) and looking at the elements inspector in your browser to see what htmx is doing with the modal

I am trying to add a class to an htmx target after an image included in the ajax response finishes loading. If I log the

target

, the class is present, but in the actual DOM it is not:

js
const afterSwapHandler = async e => {
  const detail = e.detail;
  const id = detail.elt.id;
  const image = detail.elt.querySelector('header > img');

  if (image) await imageLoaded(image);

  const target = htmx.find(`#${id}`);
  target.classList.add('loaded');
  console.log(target) // the target contains the 'loaded' class 
}

It seems like htmx is removing the added class. How can I keep it?

Ok, I should have used the

afterSettle

event instead. Problem solved.

I have backend returning html fragment which need to add into body section how can I do that???

Did anyone try to use preact with htmx?

Or any other small SPA? Because I often got the question what if the requirements need more than htmx / HtmlOverTheWire and I don't know if alpinejs is an alternative for many

Alpine seems more popular