HTMX é uma biblioteca leve (~14KB gzipped) que permite criar interfaces dinâmicas usando atributos HTML em vez de escrever JavaScript de framework. A interação dispara requisições AJAX e troca fragmentos de HTML retornados pelo servidor.
Com base na documentação oficial e em Toolstac:
1. Como Funciona
Qualquer elemento HTML pode disparar requisições via atributos como hx-get, hx-post, hx-swap. O servidor responde com fragmentos HTML que o HTMX insere na página. O desenvolvimento permanece no server-side rendering.
2. Características
- Qualquer elemento pode disparar requisições (não só links/forms)
- Qualquer evento pode ser gatilho (não só click/submit)
- Suporte a verbos HTTP (GET, POST, etc.)
- Swap configurável (innerHTML, outerHTML, beforeend, etc.)
3. HTMX 2.0 (Junho 2024)
- Fim do suporte a IE11
- Extensões em repositório separado
selfRequestsOnly: truepor padrão (segurança)- Melhor suporte a módulos (ESM, AMD, CJS)
4. Integrações
Funciona com praticamente qualquer backend: Django, FastAPI, Flask, Node.js, Spring Boot, etc.
5. Quando Usar
- Cansado da complexidade de frameworks JS
- Backend que já renderiza HTML
- Interatividade moderada sem SPA completa
- Progressive enhancement — site funciona sem JS, melhora com HTMX
6. Limitações
Cada interação gera uma ida ao servidor. Para apps com muita interatividade em tempo real ou estado complexo no cliente, um SPA pode ser mais adequado.
7. Boas Práticas
- Use
hx-triggerpara controle fino (ex:change,blur,keyupcom delay). hx-targetehx-swapdefinem onde e como o HTML é inserido.- Combine com headers como
HX-Requestno backend para diferenciar requisições HTMX de page loads completos e retornar só o fragmento necessário.
8. HTMX + Hypermedia
HTMX segue a filosofia hypermedia: o servidor manda HTML, não JSON. O cliente não precisa de um "estado de aplicação" complexo — o estado vive no servidor. Isso simplifica muito a arquitetura para certos tipos de aplicação.