How would I use AlpineJS to initialize an Alpine component when pulled in from HTMX?

[quick-111]

I am using HTMX to pull server-side rendered components into the browser, and I want to use Alpine.js to provide client-side reactivity for each loaded component. Online, the combination of these two frameworks is heavily advocated for. Real practice of it, however, is not so simple.

I’ve found that when components are loaded dynamically (via hx-get, hx-swap, etc.), Alpine does not automatically initialize all forms of x-data.

Specifically:

• ✅ Inline x-data="{...}" works reliably
• ❌ x-data="myComponent" defined via Alpine.data() does not
• ❌ x-data="myComponent()" where myComponent is a function that returns an object also does not initialize

Below is a breakdown of each scenario, what works, and what doesn't.

---

Scenario 1 (Inline x-data)

Alpine initializes correctly even when injected by HTMX.
Status: ✅ Works as expected

<div 
  x-data="{
    message: 'Hello, Alpine!',
    count: 0,
    increment() {
      this.count++
    }
  }"
>
  <h1 x-text="message"></h1>
  <button @click="increment">
    Clicked <span x-text="count"></span> times
  </button>
</div>

---

Scenario 2 (Alpine.data() Component Registration)

When HTMX injects this, Alpine does not initialize the component, even though it works during a full page load.

Status: ❌ Does NOT initialize after HTMX swap

JS

Alpine.data('counter', () => ({
  message: 'Hello, Alpine!',
  count: 0,
  increment() {
    this.count++
  }
}));

HTML

<div x-data="counter">
  <h1 x-text="message"></h1>
  <button @click="increment">
    Clicked <span x-text="count"></span> times
  </button>
</div>

---

Scenario 3 (Function Call Returning Object)

Here, instead of registering a component with Alpine.data, I define a plain function that returns the component object and call that function directly in x-data:

<div x-data="counter()">

This also works on a full page load, but does not instantiate when the element is injected via HTMX, unless manually re-initialized.

Status: ❌ Does NOT initialize after HTMX swap

JS

function counter() {
  return {
    message: 'Hello, Alpine!',
    count: 0,
    increment() {
      this.count++
    }
  }
}

HTML

<div x-data="counter()">
  <h1 x-text="message"></h1>
  <button @click="increment">
    Clicked <span x-text="count"></span> times
  </button>
</div>

---

✔️ Root Cause

Alpine only scans the DOM once during Alpine.start().
Anything injected later must be manually initialized with something like:

// Upon htmx:load
Alpine.initTree(el);

I’ve found some success using Alpine.initTree(), but it does not reliably initialize everything the way Alpine.start() does, and it is **not clearly documented, which makes relying on it inconsistent and fragile.

At the moment I've had to resort to only using x-data inline. This comes with an array of issues, particularly related to conflicting quotations when doing server-side rendering. I end up having to spend a lot of time escaping all values that are pushed into the x-data maps.

My question: What could I do instead to marry these two frameworks together, HTMX and Alpine.js? Is inline x-data truly the only way to ensure my Alpine components are initialized?

[quick-111]

It's also worth noting that the two scenarios that I have not found success with can work if I create the definition of the components upon initial page load, but, that defeats the whole purpose of pulling things in asynchronously via htmx. My primary goal would be that I can bring in both the definition of a component and the html using that component at the same time via an htmx call and Alpine initializes it on the spot.

[quick-111]

#2605 Seems to have an answer that works for my use case.

The problem was I was approaching things as if Alpine only initialized components one time at Alpine.start() and never tried again. However, after attempting the answer outlined in this comment, it seems that the issue is that HTMX has not fully loaded into the DOM before Alpine attempts to initialize it, resulting in Alpine components failing.

I can only assume that inline x-data was working more smoothly because Alpine was able to recognize it right away when htmx brought it in, whereas it needed more time to recognize the other two methods (Alpine.data() and/or function calls)