HTMX: Crea webs dinámicas usando solo HTML

En el mundo del desarrollo web, parece que todo pasa por JavaScript. Pero, ¿y si pudieras aprovechar las funciones modernas del navegador directamente desde HTML, sin necesidad de escribir toneladas de código JS?

Ahí es donde entra htmx, una librería ligera que devuelve a HTML su poder original y más.

¿Qué es HTMX?

htmx es una librería JavaScript sin dependencias que te permite:

• Hacer peticiones HTTP (GET, POST, PUT, DELETE…) directamente desde HTML.
• Usar cualquier evento como disparador, no solo clics o envíos de formularios.
• Actualizar solo partes específicas de la página, no todo el documento.
• Trabajar con HTML como respuesta del servidor, no JSON.

Con htmx, puedes extender el comportamiento clásico de etiquetas como <a> o <form> a cualquier elemento HTML, manteniendo la simplicidad de un desarrollo web tradicional.

Ejemplo rápido

Tradicionalmente, un enlace HTML funciona así:

<a href="/blog">Blog</a>

El navegador hace una petición GET a /blog y recarga toda la página. Con htmx, puedes hacer cosas como:

<button 
    hx-post="/clicked"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="outerHTML">
    Click Me!
</button>

Esto significa:

“Cuando el usuario haga clic en este botón, envía una petición POST a /clicked y reemplaza el contenido del elemento con id parent-div por la respuesta del servidor.”

Ventajas clave del htmx

1. HTML súper mejorado: Cualquier elemento puede disparar peticiones HTTP.
2. Menos JavaScript: La lógica se define en atributos HTML (hx-* o data-hx-*).
3. Más opciones de interacción: Cualquier evento puede ser el disparador.
4. Actualizaciones parciales: Solo recargas lo necesario.
5. Compatible con el modelo web original: HTML como motor del estado de la aplicación.

Instalación de HTMX

Htmx es tan simple que puedes usarlo con solo añadir un <script>: CDN (jsDelivr)

<script src="https://cdn.jsdelivr.net/npm/htmx.org@2.0.6/dist/htmx.min.js"></script>

Descarga directa

• Bajar htmx.min.js y colocarlo en tu proyecto.
• Incluirlo con:

<script src="/path/to/htmx.min.js"></script>

NPM

npm install htmx.org@2.0.6

Luego importarlo en tu JS:

import 'htmx.org';
window.htmx = require('htmx.org');

¿Por qué usar htmx en tu proyecto?

• Ideal para apps ligeras que no necesitan frameworks SPA pesados.
• Reduce la complejidad del código y mejora la velocidad de carga.
• Perfecto para sitios donde SEO y rendimiento son prioritarios.
• Funciona muy bien con arquitecturas server-first como las de Astro, Django o Laravel.

Conclusión

htmx devuelve el poder a HTML, permitiéndote crear aplicaciones web interactivas sin sobrecargar al navegador con JavaScript innecesario.

Si quieres un desarrollo más limpio, rápido y fácil de mantener, esta librería puede convertirse en tu arma secreta.

CONSEJO: Menos JavaScript significa menos bloqueos de renderizado y mejores Core Web Vitals, lo que ayuda a tu posicionamiento en Google.