Ejemplos Reales Paso a Paso de HTMX

1Cargar contenido dinámico al hacer scroll

html 
<div hx-get="/mas-contenido" hx-trigger="revealed" hx-swap="afterend">
  Cargando más contenido...
</div>
  Explicación de los atributos

  • revealed: Se dispara cuando el elemento se revela en la pantalla.
  • hx-get: Realiza una petición GET al endpoint /mas-contenido.
  • hx-trigger: Define el evento que dispara la petición.
  • hx-swap: Define el modo de swap que se utilizará para insertar la respuesta.

2Botón para cargar contenido

html 
<button hx-get="/morecontent" hx-target="#content">Cargar más</button>
<div id="content">Contenido inicial</div>
  Explicación de los atributos

  • get: Se dispara cuando el usuario hace click en el botón.
  • hx-get: Realiza una petición GET al endpoint /morecontent.
  • hx-target: Define dónde se mostrará la respuesta.
  • hx-swap: Define el modo de swap que se utilizará para insertar la respuesta.

3Auto-actualización cada 10s

html 
<div hx-get="/latest" hx-trigger="every 10s" hx-target="#scoreDisplay">
  <span id="scoreDisplay">Cargando...</span>
</div>
  Explicación de los atributos

  • every: Se dispara cada 10 segundos.
  • hx-get: Realiza una petición GET al endpoint /latest.
  • hx-trigger: Define el evento que dispara la petición.
  • hx-target: Define dónde se mostrará la respuesta.

4Modal dinámico

html 
<button hx-get="/modal" hx-target="#modalContainer" hx-swap="afterend">
  Mostrar Modal
</button>

<div id="modalContainer"></div>
  Explicación de los atributos

  • get: Se dispara cuando el usuario hace click en el botón.
  • hx-get: Realiza una petición GET al endpoint /modal.
  • hx-target: Define dónde se mostrará la respuesta.
  • hx-swap: Define el modo de swap que se utilizará para insertar la respuesta.

5Manejo de formularios

html 
<form hx-post="/submit" hx-trigger="submit" hx-target="#respuesta">
  <input type="text" name="nombre" />
  <button type="submit">Enviar</button>
</form>

<div id="respuesta"></div>
  Explicación de los atributos

  • post: Se dispara cuando el usuario hace click en el botón.
  • hx-post: Realiza una petición POST al endpoint /submit.
  • hx-trigger: Define el evento que dispara la petición.
  • hx-target: Define dónde se mostrará la respuesta y reemplaza el contenido.

6Comparación JS vs HTMX

JavaScript clásico:

html 
<button id="sub">Subscribe</button>
<script>
  document.getElementById("sub").addEventListener("click", () => {
    fetch("/subscribe", { method: "POST" })
      .then((res) => res.text())
      .then((html) => (document.getElementById("sub").outerHTML = html));
  });
</script>

Con HTMX:

html 
<button id="sub" hx-post="/subscribe" hx-target="this" hx-swap="outerHTML">
  Subscribe
</button>
  Explicación de los atributos

  • post: Se dispara cuando el usuario hace click en el botón.
  • hx-post: Realiza una petición POST al endpoint /subscribe.
  • hx-target: Define dónde se mostrará la respuesta y reemplaza el contenido.
  • hx-swap: Define el modo de swap que se utilizará para insertar la respuesta.

7Ejemplo de carrito

html 
<button hx-post="/add" hx-target="#cart" hx-swap="outerHTML">
  Añadir al carrito
</button>

<div id="cart">Carrito vacío</div>

8Triggers de HTMX

Son eventos que se disparan cuando ocurren ciertas acciones en el DOM.

html 
<input
  type="text"
  hx-get="/search"
  hx-trigger="keyup changed delay:300ms"
  hx-target="#results"
/>

<div id="results"></div>

9Trigger load

html 
<div hx-get="/fetch-data" hx-trigger="load" hx-swap="innerHTML">Cargar</div>
  Explicación de los atributos

  • load: Se dispara cuando el elemento se carga en el DOM.
  • hx-get: Realiza una petición GET al endpoint /fetch-data.
  • hx-swap: Reemplaza el contenido del elemento.

Mira cómo funciona en este caso, un div que al cargar la página, realiza una petición GET al endpoint /fetch-data y la respuesta se mostrará en el div.

10Trigger click

html 
<button hx-get="/fetch-data" hx-trigger="click" hx-swap="innerHTML">
  Cargar
</button>
  Explicación de los atributos

  • click: Se dispara cuando el usuario hace click en el elemento.
  • hx-get: Realiza una petición GET al endpoint /fetch-data.
  • hx-swap: Reemplaza el contenido del elemento.

En este caso, se muestra un botón que al hacer click, realiza una petición GET al endpoint /fetch-data y la respuesta se mostrará en el botón.

11Trigger change

html 
<input type="text" hx-get="/search" hx-trigger="change" hx-target="#results" />

<div id="results"></div>
  Explicación de los atributos

  • change: Se dispara cuando el valor del input cambia.
  • hx-get: Realiza una petición GET al endpoint /search.
  • hx-target: Define dónde se mostrará la respuesta.

En este escenario, se observa un input que al cambiar su valor, realiza una petición GET al endpoint /search y la respuesta se mostrará en el div con el id results.

12Trigger keyup

html 
<input type="text" hx-get="/search" hx-trigger="keyup" hx-target="#results" />

<div id="results"></div>
  Explicación de los atributos

  • keyup: Se dispara cuando el usuario presiona una tecla.
  • hx-get: Realiza una petición GET al endpoint /search.
  • hx-target: Define dónde se mostrará la respuesta.

En este contexto, se ve un input que al presionar una tecla, realiza una petición GET al endpoint /search y la respuesta se mostrará en el div con el id results.

13Trigger blur

html 
<input type="text" hx-get="/search" hx-trigger="blur" hx-target="#results" />
<div id="results"></div>
  Explicación de los atributos

  • blur: Se dispara cuando el usuario pierde el enfoque del input.
  • hx-get: Realiza una petición GET al endpoint /search.
  • hx-target: Define dónde se mostrará la respuesta.

En este contexto, se mira como un input que al perder el enfoque, realiza una petición GET al endpoint /search y la respuesta se mostrará en el div con el id results.

14Trigger focus

html 
<input type="text" hx-get="/search" hx-trigger="focus" hx-target="#results" />
<div id="results"></div>
  Explicación de los atributos

  • focus: Se dispara cuando el usuario obtiene el enfoque del input.
  • hx-get: Realiza una petición GET al endpoint /search.
  • hx-target: Define dónde se mostrará la respuesta.

A continuación, se muestra como un input que al obtener el enfoque, realiza una petición GET al endpoint /search y la respuesta se mostrará en el div con el id results.

15Trigger change

html 
<input type="text" hx-get="/search" hx-trigger="change" hx-target="#results" />
<div id="results"></div>
  Explicación de los atributos

  • change: Se dispara cuando el valor del input cambia.
  • hx-get: Realiza una petición GET al endpoint /search.
  • hx-target: Define dónde se mostrará la respuesta.

En este caso, se demuestra cómo un input que al cambiar su valor, realiza una petición GET al endpoint /search y la respuesta se mostrará en el div con el id results.

16Targets hx-target

Los atributos Targets nos permiten especificar, mediante selectores de CSS, donde se mostrará la respuesta de la request realizada. Por ejemplo:

html 
<button hx-post="/add" hx-target="#cart" hx-swap="outerHTML">
Añadir al carrito
</button>
<div id="cart">Carrito vacío</div>

Al hacer click en el botón, se realizará una petición POST al endpoint /add y la respuesta se mostrará en el elemento con el id cart.

🔧 Backend con Node.js

js 
const express = require("express");
const bodyParser = require("body-parser");
const app = express();

app.use(bodyParser.urlencoded({ extended: true }));

let count = 0;
app.post("/increment", (req, res) => {
  count++;
  res.send(`${count}`);
});
app.listen(3000, () => console.log("http://localhost:3000"));

Y en el HTML:

html 
<div>
  Count: <span id="count" hx-swap="innerHTML">0</span>

  <button hx-post="/increment" hx-target="#count">Increment</button>
</div>

17Contador con HTMX vs React

Con HTMX:

html 
<div>
  Count: <span id="count" hx-swap="innerHTML">0</span>

  <button hx-post="/increment" hx-target="#count">Increment</button>

</div>
  Explicación de los atributos

  • post: Se dispara cuando el usuario hace click en el botón.
  • hx-post: Realiza una petición POST al endpoint /increment.
  • hx-target: Define dónde se mostrará la respuesta y reemplaza el contenido.
  • hx-swap: Define el modo de swap que se utilizará para insertar la respuesta.

js 
const express = require("express");
const bodyParser = require("body-parser");
const app = express();

app.use(bodyParser.urlencoded({ extended: true }));

let count = 0;
app.post("/increment", (req, res) => {
  count++;
  res.send(`${count}`);
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Servidor corriendo en http://localhost:${PORT}`);
});

con React:

jsx 
import { useState } from "react";

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </>
  );
}

18Integración con CSS

HTMX permite integrar CSS para mostrar un indicador de carga, aprovechando las animaciones CSS. Ofrece el atributo hx-indicator para mostrar un indicador de carga.

html 
<div id="caja" hx-get="/fetch" hx-trigger="click" hx-indicator="#loader">
  Cargar
</div>

<div id="loader" style="display: none;">Cargando...</div>
  Explicación de los atributos

  • indicator: Se dispara cuando el usuario hace click en el elemento.
  • hx-get: Realiza una petición GET al endpoint /fetch.
  • hx-trigger: Define el evento que dispara la petición.
  • hx-indicator: Define el elemento que se mostrará como indicador de carga.