Un desarrollador publica un tutorial en el que explica cómo construir un clon mínimo de htmx recurriendo únicamente a JavaScript vanilla. La pieza forma parte de una serie iniciada en 2018 con clones de React y Vue, y se propone como un ejercicio divulgativo para mostrar el núcleo de la librería.
htmx permite declarar atributos HTML que disparan peticiones HTTP y actualizan fragmentos del DOM sin escribir JavaScript. Un botón con hx-post, hx-trigger, hx-target y hx-swap describe, por ejemplo, cuándo enviar la petición, a qué URL, qué elemento reemplazar y de qué forma. Internamente la librería combina eventos, fetch y manipulación del DOM para ocultar esa complejidad al desarrollador.
El artículo parte de una versión de diez líneas con querySelectorAll y fetch, y la amplía progresivamente. Añade soporte para todos los métodos HTTP, una cabecera personalizada que identifica las peticiones, estrategias de intercambio (outerHTML, beforebegin, afterend, delete, none) y un MutationObserver que reescanea solo los nodos nuevos en lugar del documento completo. Después incorpora un analizador de triggers más rico, con modificadores como delay, changed y once, y un resolvedor de targets que entiende palabras clave como this, next, nearest o body.
El tutorial también cubre eventos personalizados —beforeRequest, afterRequest, beforeSwap y afterSwap— junto con cabeceras de respuesta como HX-Trigger y HX-Redirect, que el servidor puede usar para emitir acciones en el cliente. El resultado es un clon funcional en unas 40 líneas que reproduce los fundamentos de htmx sin aspirar a igualar su cobertura completa.
