How do you make third-party widgets work in content loaded by htmx?

Summary

Initialise them in htmx.onLoad(callback) (the htmx:load event), which runs for the initial page and every piece of new content htmx adds. If your own JavaScript inserts HTML containing hx- attributes, call htmx.process(element) so htmx activates it.

Longer Answer

Code that runs only on DOMContentLoaded misses content swapped in later, which is a common bug after adding htmx or hx-boost. Make initialisation idempotent (mark processed elements) because content can be processed more than once, and clean up widgets in htmx:beforeCleanupElement if they hold timers or listeners.

Key Points

• htmx.onLoad for new content.
• htmx.process for your own inserted HTML.
• Idempotent initialisation.
• Clean up when content is removed.

Deep dive: htmx: Build Interactive Web Apps with HTML: htmx and JavaScript Together