HTMX es una biblioteca ligera de JavaScript que permite a los desarrolladores construir interfaces web dinámicas y reactivas sin necesidad de escribir grandes cantidades de JavaScript personalizado.
Utiliza atributos HTML para manejar peticiones AJAX, reemplazos de contenido, manejo de eventos y mucho más, todo sin recargar la página completa. Es ideal para mejorar la experiencia de usuario y reducir la complejidad del frontend.
HTMX se utiliza en proyectos donde se busca mantener la lógica en el servidor, mejorar la velocidad de interacción y simplificar el desarrollo web moderno.
HTMX revoluciona la forma en que se actualizan las páginas web. En lugar de recargar toda la página, HTMX permite hacer micro-actualizaciones, solicitando solo los fragmentos necesarios del servidor.
HTMX extiende HTML con nuevos atributos que facilitan la comunicación cliente-servidor:
AJAX con solo HTML.DOM.HTMX se integra fácilmente en proyectos existentes. Basta con incluir la biblioteca y añadir algunos atributos a los elementos HTML para empezar a disfrutar de sus beneficios. Esto simplifica la creación de aplicaciones web dinámicas sin la necesidad de aprender un nuevo framework.
HTMX funciona muy bien con cualquier backend, ya sea que utilices PHP, Python (Django, Flask), Ruby, Node.js, o cualquier otra tecnología. El servidor sigue siendo el encargado de procesar la lógica y generar las vistas, mientras que HTMX gestiona las interacciones del lado del cliente.
Estos atributos son fundamentales para utilizar HTMX en tus proyectos:
| Atributo | Descripción |
|---|---|
hx-get | Hace una petición GET al servidor |
hx-post | Hace una petición POST |
hx-put | Envía datos con método PUT |
hx-delete | Envía una solicitud DELETE |
hx-patch | Para actualizaciones parciales |
hx-target | Define dónde colocar la respuesta del servidor en el elemento de destino |
hx-trigger | Evento que activa la petición |
hx-swap | Controla cómo insertar la respuesta del servidor en el elemento de destino |
hx-indicator | Selector de loading visual |
hx-confirm | Mensaje de confirmación antes de la acción |
hx-vals | Datos extra a enviar |
hx-include | Incluye otros datos del DOM |
hx-params | Define parámetros a incluir |
hx-swap)El atributo hx-swap define el modo de swap que se utilizará para insertar la respuesta del servidor en el elemento de destino.
| Modo | Efecto |
|---|---|
innerHTML | Reemplaza el contenido del elemento |
outerHTML | Reemplaza el elemento completo |
beforebegin | Inserta antes del elemento |
afterbegin | Inserta como primer hijo |
beforeend | Inserta como último hijo |
afterend | Inserta después del elemento |
delete | Elimina el elemento |
none | No inserta nada |
Para comenzar a utilizar HTMX, puedes integrar HTMX de forma sencilla utilizando su CDN oficial. Ideal para quienes están comenzando a explorar esta poderosa biblioteca para construir interfaces web dinámicas sin recargar toda la página.
Usaremos la biblioteca directamente desde https://htmx.org/ vía CDN:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>HTMX Ejemplo Básico</title>
</head>
<body>
<h1>HTMX</h1>
<p>¡Bienvenido a mi página!</p>
<button
hx-get="/actualizar"
hx-swap="innerHTML"
hx-trigger="click"
>
Actualizar
</button>
<script
src="https://unpkg.com/htmx.org@2.0.4"
integrity="sha384-HGfztofotfshcF7+8n44JQL2oJmowVChPTg48S+jvZoztPfvwD79OC/LTtG6dMp+"
crossorigin="anonymous"
></script>
</body>
</html>hx-trigger=“click”: Dispara la petición HTTP cuando el botón es presionado.hx-get=“/actualizar”: Envía una petición HTTP de tipo GET al endpoint /actualizar cuando el botón es presionado.hx-swap=“innerHTML”: Inserta la respuesta del servidor reemplazando el contenido interno del elemento objetivo (en este caso, el botón).Con solo HTML + backend puedes crear interfaces modernas, reactivas y ligeras.