Skip to content

htmx + Alpine template tag

New Courses Coming Soon

Join the waiting lists

I used Alpine’s <template> tag for something on my site, and inside this template tag I used some htmx to power a form.

The template was defined like this:

<template x-if="$store.showModal">

Problem was, my form only sent GET requests (the default browser behavior) because how template tags work in Alpine is, the HTML is added to the DOM when the template x-if directive resolves to true.

So basically htmx had no idea about this new HTML.

I had to re-process the form by adding an id to the form and then using something like


Where to add this code?

Inside the x-init attribute in the template.

But x-init is ran when the element is processed by Alpine (you can test with x-init="console.log('test')").

You want to check, inside x-init, for when the condition is true, and then run the htmx processing.

Like this:

    $watch('$store.showModal', () => {
      if ($store.showModal === true) {
  <form id="form-edit-project-name">...</form>
→ Read my HTMX Tutorial on The Valley of Code
→ Read my Alpine.js Tutorial on The Valley of Code

Here is how can I help you: