htmx 4 de 0 a Hero

Curso completo de htmx 4.0 (“The Fetchening”), la reescritura de htmx sobre la API fetch() que trae morphing, streaming, partials explícitos y herencia de atributos explícita al core.

Versión cubierta: 4.0.0-beta6. htmx 4 está en beta pública; la rama estable actual sigue siendo la 2.x y el equipo de htmx planea que 4.0 pase a ser latest durante 2027. Todo el curso marca explícitamente qué es distinto respecto a htmx 2 para que puedas escribir código hoy y migrar sin sorpresas.

Antes de empezar

Necesitas:

• HTML y CSS a nivel intermedio.
• Nociones de HTTP: métodos, códigos de estado, headers.
• Cualquier lenguaje de servidor que sepa devolver HTML. Los ejemplos usan Bun por brevedad, pero todo aplica igual a Go, Python, PHP, Ruby, Java o .NET.

No necesitas: React, un bundler, Node, TypeScript, ni un paso de build.

Ruta de aprendizaje

flowchart TD
    A[Fundamentos<br/>Cap. 1-3] --> B[El triángulo de htmx<br/>Cap. 4-6]
    B --> C[Modelo de atributos<br/>Cap. 7-9]
    C --> D[Interactividad<br/>Cap. 10-13]
    D --> E[Tiempo real<br/>Cap. 14-15]
    E --> F[Proyecto CRUD<br/>Cap. 16]
    F --> G[Migración y producción<br/>Cap. 17-18]

Capítulos

Fundamentos

#	Capítulo	Qué aprendes
1	Introducción a htmx 4	Hipermedia, HDA, qué cambia “The Fetchening”
2	Instalación y primer proyecto	CDN, npm, <meta name="htmx-config">, HCON, hola mundo
3	Peticiones: hx-get, hx-post y familia	Verbos, parámetros, hx-action/hx-method, headers de request

El triángulo de htmx

#	Capítulo	Qué aprendes
4	Triggers	hx-trigger, modificadores, polling, revealed, intersect
5	Targets y selectores extendidos	hx-target, closest, find, next, global:
6	Swaps y morphing	innerMorph, outerMorph, upsert, modificadores, View Transitions

Modelo de atributos

#	Capítulo	Qué aprendes
7	Herencia explícita y HCON	:inherited, :append, hx-config, sintaxis HCON
8	Partials, OOB y selección	<hx-partial>, hx-swap-oob, hx-select, hx-select-oob
9	Datos y formularios	hx-vals, hx-include, hx-headers, hx-encoding, validación

Interactividad

#	Capítulo	Qué aprendes
10	Eventos y scripting	Modelo htmx:<fase>:<sistema>, hx-on, ctx, API JS
11	UX: indicadores, sync y preservación	hx-indicator, hx-disable, hx-sync, hx-preserve, hx-confirm
12	Errores y códigos de estado	hx-status, noSwap, HX-Retarget, HX-Reswap, timeouts
13	Historial y boost	hx-push-url, hx-boost, el nuevo modelo de historial sin caché

Tiempo real y ecosistema

#	Capítulo	Qué aprendes
14	Streaming: SSE, WebSockets y multipart	hx-sse, hx-ws, hx-multipart, streams con fetch()
15	Catálogo de extensiones	hx-live, hx-optimistic, hx-preload, hx-head y más

Práctica y producción

#	Capítulo	Qué aprendes
16	Proyecto: CRUD completo	App de tareas de punta a punta con Bun + htmx 4
17	Migración desde htmx 2	Tabla de cambios, upgrade-check, htmx-2-compat
18	Seguridad y producción	hx-ignore, CSP, mode, allowlist de extensiones, checklist

Cómo usar este curso

1. Lee los capítulos 1 al 6 en orden: son el núcleo conceptual y no se pueden saltar.
2. Del 7 al 15 puedes ir salteado según lo que necesites, pero el 7 (herencia explícita) es el cambio de mentalidad más grande respecto a htmx 2.
3. El capítulo 16 arma una aplicación completa reutilizando todo lo anterior.
4. Si vienes de htmx 2, lee el 17 antes de tocar código legado.

Empieza por la introducción →.