Skills / Engineering / HTMX Hypermedia

HTMX Hypermedia

Build interactive web apps with HTMX — server-rendered HTML over the wire, no JSON APIs, no client bundles. Covers hx-* attributes, SSE, websockets, swap strategies, and progressive enhancement patterns.

This skill helps you build apps using the hypermedia approach. It writes server endpoints that return HTML fragments, uses hx-get/hx-post/hx-trigger for interactions, configures hx-swap strategies (outerHTML, beforeend, morph), implements SSE and websockets via HTMX extensions, and handles common patterns: inline edit, infinite scroll, modal dialogs, optimistic UI. Covers integration with FastAPI, Django, Rails, Go, and Phoenix.

htmx hypermedia frontend server-rendered html

When to use

Use when building CRUD-heavy apps where a SPA is overkill, replacing React/Vue with server-rendered HTML, building admin UIs and dashboards, or when team productivity matters more than the latest framework.

Examples

Inline-edit table

Build an editable data table with HTMX

Create an HTMX inline-edit table for product inventory: click cell to edit, blur to save with hx-put, optimistic update, validation errors swap inline

Real-time dashboard

Live-update charts with SSE

Build an HTMX dashboard that uses Server-Sent Events to push metric updates every 5s, with charts swapping via hx-swap-oob
Added to wishlist