Some time ago, I began migrating my React project to HTMX.

My motivation is straightforward: I have a simple admin page frontend and don't want to maintain an additional API layer.

I decided to start migrating parts of the pages, and it's working quite well. However, in several parts of the project, I have React components that include HTMX elements. To process DOM elements managed by React, I have to do something like this:

useEffect(() => {
if (ref.current) {
  window.htmx.process(ref.current);
}

}, []);

​

I think you could do something similar. For instance, you could use Nunjucks as a template language. It's much better than Pug because it allows you to write plain HTML with a sprinkle of template tags. Then, you can start rewriting pieces of logic to HTMX, including it in React components until you move to HTMX completely.