HTMX là gì? Tạo web app động không cần JS framework

HTMX đang trở thành lựa chọn hấp dẫn cho các team muốn xây dựng ứng dụng web tương tác mà không cần học React, Vue hay Svelte. Thư viện này chỉ nặng 14KB gzip và cho phép bạn thêm hành vi động (AJAX, CSS transitions, WebSockets, Server-Sent Events) trực tiếp vào HTML qua các thuộc tính hx-*. Không cần build step, không cần node_modules, không cần quản lý state phức tạp.

HTMX hoạt động như thế nào?

HTMX mở rộng HTML bằng cách thêm các thuộc tính cho phép element tự thực hiện HTTP request và cập nhật DOM từ phản hồi server. Nguyên tắc cốt lõi: server trả về HTML fragment, không phải JSON. Browser nhận fragment đó và swap vào vị trí bạn chỉ định.

Sơ đồ luồng request-response HTMX: browser gửi request hx-get, server trả HTML fragment, browser swap vào DOM

Ví dụ cơ bản: một nút tải thêm bình luận mà không reload trang:

Khi click, HTMX gửi GET /comments?page=2, server trả về HTML các

..., HTMX chèn vào cuối #comments. Xong.

Thuộc tính cốt lõi bạn cần biết

hx-get, hx-post, hx-put, hx-patch, hx-delete — phương thức HTTP.
hx-target — CSS selector của element sẽ được cập nhật (mặc định là chính element đó).
hx-swap — cách chèn nội dung: innerHTML (mặc định), outerHTML, beforebegin, afterbegin, beforeend, afterend, delete, none.
hx-trigger — sự kiện kích hoạt: click (mặc định), change, keyup, load, revealed, intersect, hoặc custom event.
hx-indicator — hiển thị spinner khi đang load.
hx-confirm — hỏi xác nhận trước khi gửi request.
hx-include — thêm giá trị form/input vào request.

So sánh HTMX với React, Alpine.js, LiveView

Tiêu chí	HTMX	React/Vue	Alpine.js	Phoenix LiveView
Kích thước	~14KB gzip	40KB+ (chỉ React)	~15KB gzip	~30KB (client)
Build step	Không	Bắt buộc	Không	Bắt buộc (Elixir)
State management	Server-side	Client-side phức tạp	Client-side đơn giản	Server-side
SEO	Tự nhiên tốt	Cần SSR/Next.js	Tự nhiên tốt	Tự nhiên tốt
Độ dốc học	Rất thấp (chỉ HTML)	Cao (JSX, hooks, state)	Thấp	Trung bình (Elixir)
Thích hợp	CRUD, dashboard, form, table	SPA phức tạp, realtime nặng	Widget nhúng, interaction nhỏ	App realtime, Elixir team

Biểu đồ so sánh kích thước bundle: HTMX 14KB, React 40KB+, Alpine 15KB, LiveView 30KB

HTMX không thay thế React trong mọi trường hợp. Nếu bạn xây dựng trình soạn thảo collaborative (như Figma), game, hay dashboard realtime với WebSocket hai chiều phức tạp — React vẫn là lựa chọn đúng. Nhưng với 80% ứng dụng CRUD, admin panel, form nhập liệu, bảng dữ liệu có phân trang/sắp xếp, HTMX viết nhanh hơn, bảo trì dễ hơn.

Ví dụ thực tế: Tìm kiếm gợi ý (autocomplete)

Server trả về fragment HTML cho :

Server nhận q=query, trả về . HTMX cập nhật datalist ngay lập tức.

Xử lý form validation

HTMX làm validation server-side trở nên tự nhiên. Form submit qua hx-post, server trả về 422 Unprocessable Entity kèm HTML fragment chứa lỗi:

Khi validation fail, server trả lại cả form kèm thông báo lỗi. HTMX swap outerHTML thay thế form cũ bằng form mới có lỗi. Không cần viết JS validate client-side.

WebSocket và Server-Sent Events

HTMX hỗ trợ realtime qua hx-ext="ws" hoặc hx-ext="sse". Ví dụ chat đơn giản:

Server push HTML fragment đến #messages, HTMX append tự động. Không cần quản lý connection, reconnect, parse JSON.

Khi nào KHÔNG nên dùng HTMX

Ứng dụng cần offline-first (PWA, IndexedDB sync).
Logic UI phức tạp hoàn toàn client-side (drag-drop canvas, editor rich-text).
Team đã am hiểu React/Vue và codebase lớn đang chạy ổn.
Cần mobile app chia sẻ logic (React Native).

Kết luận

HTMX đưa HTML trở lại vị trí trung tâm. Server quyết định UI, browser chỉ render và gửi sự kiện. Cách tiếp cận này giảm complexity, tăng tốc độ phát triển, và SEO tốt ngay từ đầu. Với team nhỏ, startup, hoặc dự án nội bộ — HTMX thường là lựa chọn tối ưu hơn so với SPA framework nặng nề.

Tài liệu chính thức HTMX | Mã nguồn mở trên GitHub