Cómo combinar HTMX y Alpine JS: Dos front-ends ligeros y poderosos

HTMX y Alpine.js están cambiando la forma de construir interfaces web. Ambos se enfocan en extender HTML con capacidades modernas sin necesidad de un sistema de compilación. ¿Lo mejor? ¡Puedes usarlos juntos!

Qué son HTMX y Alpine

HTMX te permite hacer llamadas tipo Ajax y actualizar vistas desde el backend usando solo atributos HTML (hx-get, hx-target, etc.).

Alpine.js, por su parte, agrega reactividad y manejo de estado en el cliente, todo también desde atributos HTML (x-data, x-for, x-show, etc.).

Ambos usan atributos embebidos para mejorar el HTML, lo que significa menos archivos, menos complejidad y más productividad.

¿Rompen con la separación de responsabilidades?

Una crítica común es que “mezclan lógica con presentación”. Aunque esto puede ser un problema en apps grandes, en proyectos pequeños o medianos, el enfoque tiene sentido.

HTMX extiende HTML y Alpine inyecta JavaScript donde lo necesitas. Lo importante es: ¿te sirve para tu proyecto?

Usándolos juntos: lo mejor de ambos mundos

Combinar HTMX y Alpine es natural. HTMX puede encargarse de la carga de datos desde el backend, mientras Alpine maneja interacciones del usuario y estados del lado cliente.

Ejemplo: carga una lista de productos con HTMX y permite filtrarlos dinámicamente con Alpine.

¿Dónde vive el estado?

Con HTMX:

El estado vive en el servidor. Ejemplo:

<div>
  <ul id="album-list"></ul> 
  <button hx-get="/albums" hx-target="#album-list">Cargar Álbumes</button> 
</div>

El servidor responde con HTML renderizado y HTMX lo inserta en el DOM. ✅

Con Alpine:

El estado vive en el cliente. Ejemplo:

<div x-data="{ albums: [], fetchAlbums() { 
  fetch('/albums')
    .then(res => res.json())
    .then(data => this.albums = data) 
}}">
  <ul>
    <template x-for="album in albums" :key="album.id">
      <li x-text="album.name"></li>
    </template>
  </ul>
  <button @click="fetchAlbums()">Cargar Álbumes</button>
</div>

Aquí, el estado es local y se manipula con JavaScript embebido.

---

Ejemplo combinado en acción

<div x-data="{ 
        selectedProduct: null,
        showDetails: false,
        selectProduct(event) {
            this.selectedProduct = event.target.innerHTML;
            this.showDetails = true;
        }
    }" @click="selectProduct">

    <div id="product-list"></div>

    <div class="product" x-show="showDetails">
        <p x-text="selectedProduct"></p>
    </div>

    <select hx-get="/products" name="category" hx-target="#product-list">
        <option value="all">Todos</option>
        <option value="electronics">Electrónica</option>
        <option value="clothing">Ropa</option>
    </select>
</div>

Aquí usamos HTMX para cargar productos por categoría y Alpine para mostrar detalles al hacer clic, todo sin perder simplicidad.

Complementos útiles: Alpine Morph

La extensión Alpine Morph permite reemplazar componentes sin perder el estado de Alpine, ideal al usarlos con HTMX.

¿Y si necesito JSON?

HTMX puede trabajar con JSON usando extensiones, pero si ya estás usando Alpine, puedes usar su sistema fetch() directamente para APIs que devuelven JSON. ¡Tienes lo mejor de ambos mundos!

---

Conclusión ✅

HTMX y Alpine tienen una excelente relación peso/capacidad. Son herramientas pequeñas con un gran impacto:

• ⚡ HTMX: Simple, potente y enfocado en HTML.
• Alpine.js: Reactividad ligera sin complicaciones.
• Ambos: Se integran perfectamente para construir UIs modernas sin frameworks pesados.

¿Quieres construir rápido, con flexibilidad y sin complicarte con React o Vue? HTMX + Alpine puede ser tu stack ideal.