Introducción a HTMX - Guía Completa

  ¿Qué es HTMX y para qué se usa 🚀?

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.

  Ventajas de usar HTMX 🚀

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:

  • Realiza peticiones AJAX con solo HTML.
  • Reemplaza o actualiza partes específicas del DOM.
  • Elimina gran parte del JavaScript necesario para interactividad básica.

Implementación Sencilla

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.

Compatibilidad con Backends

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.

🧩 Principales Atributos

Estos atributos son fundamentales para utilizar HTMX en tus proyectos:

AtributoDescripción
hx-getHace una petición GET al servidor
hx-postHace una petición POST
hx-putEnvía datos con método PUT
hx-deleteEnvía una solicitud DELETE
hx-patchPara actualizaciones parciales
hx-targetDefine dónde colocar la respuesta del servidor en el elemento de destino
hx-triggerEvento que activa la petición
hx-swapControla cómo insertar la respuesta del servidor en el elemento de destino
hx-indicatorSelector de loading visual
hx-confirmMensaje de confirmación antes de la acción
hx-valsDatos extra a enviar
hx-includeIncluye otros datos del DOM
hx-paramsDefine parámetros a incluir

♻️ Modos de Swap (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.

ModoEfecto
innerHTMLReemplaza el contenido del elemento
outerHTMLReemplaza el elemento completo
beforebeginInserta antes del elemento
afterbeginInserta como primer hijo
beforeendInserta como último hijo
afterendInserta después del elemento
deleteElimina el elemento
noneNo inserta nada

📘 Ejemplo básico de uso de HTMX

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.

🔗 Incluir HTMX desde CDN

Usaremos la biblioteca directamente desde https://htmx.org/ vía CDN:

html 
<!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>
  Explicación de los atributos HTMX

  • 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).

  Conclusión

  • Menos JavaScript.
  • Menos lógica.
  • Interactividad rápida sin SPA.
  • Interfaz moderna.

Con solo HTML + backend puedes crear interfaces modernas, reactivas y ligeras.