HTMX: Modern Web Apps Without Heavy JavaScript

HTMX is the anti-framework. While the JavaScript world builds increasingly complex client-side architectures, HTMX asks a radical question: what if you just returned HTML from the server and swapped it into the page? No JSON. No client-side rendering. No virtual DOM. Just HTML.

At Pillai Infotech, we used HTMX for an internal admin dashboard and were genuinely surprised by how much we could accomplish with zero build step, zero client-side JavaScript (beyond HTMX's 14 KB), and a simple PHP backend.

What HTMX Does

HTMX extends HTML with attributes that let any element make HTTP requests and update the DOM. It returns to the original vision of hypermedia — where the server controls the state and the client is a thin rendering layer.

<!-- Click button → GET request → replace #results with response HTML -->
<button hx-get="/search?q=htmx"
        hx-target="#results"
        hx-swap="innerHTML">
  Search
</button>

<div id="results">
  <!-- Server returns HTML, not JSON -->
</div>

<!-- That's it. No JavaScript. No fetch(). No useState(). -->

HTMX is 14 KB (gzipped). React + ReactDOM is ~42 KB. Add a state management library, a router, and a fetch wrapper, and you're at 80-150 KB before writing a single line of application code.

How It Works

HTMX adds four core attributes to any HTML element:

• hx-get, hx-post, hx-put, hx-delete — make HTTP requests
• hx-target — which element to update with the response
• hx-swap — how to insert the response (innerHTML, outerHTML, beforeend, etc.)
• hx-trigger — what event triggers the request (click, submit, load, revealed, etc.)

<!-- Infinite scroll -->
<div hx-get="/items?page=2"
     hx-trigger="revealed"
     hx-swap="afterend">
  Loading more...
</div>

<!-- Live search with debounce -->
<input type="search" name="q"
       hx-get="/search"
       hx-trigger="keyup changed delay:300ms"
       hx-target="#results">

<!-- Delete with confirmation -->
<button hx-delete="/items/42"
        hx-confirm="Are you sure?"
        hx-target="closest tr"
        hx-swap="outerHTML swap:500ms">
  Delete
</button>

<!-- Form submission -->
<form hx-post="/contacts"
      hx-target="#contact-list"
      hx-swap="beforeend">
  <input name="name" required>
  <input name="email" type="email" required>
  <button type="submit">Add Contact</button>
</form>

Common HTMX Patterns

Active Search

<!-- Client: just HTML attributes -->
<input type="search"
       hx-get="/api/search"
       hx-trigger="input changed delay:250ms"
       hx-target="#results"
       hx-indicator="#spinner"
       placeholder="Search articles...">
<span id="spinner" class="htmx-indicator">Searching...</span>
<div id="results"></div>

// Server (any language): return HTML fragment
// PHP example
$query = $_GET['q'] ?? '';
$results = $db->search('articles', $query);
foreach ($results as $article) {
    echo "<div class='result'>";
    echo "<h3><a href='/article/{$article['slug']}'>{$article['title']}</a></h3>";
    echo "<p>{$article['excerpt']}</p>";
    echo "</div>";
}

Click-to-Edit

<!-- Display mode -->
<div hx-get="/contacts/1/edit"
     hx-trigger="click"
     hx-swap="outerHTML">
  <span>John Doe</span> — click to edit
</div>

<!-- Server returns edit form that replaces the div -->
<form hx-put="/contacts/1"
      hx-target="this"
      hx-swap="outerHTML">
  <input name="name" value="John Doe">
  <button type="submit">Save</button>
  <button hx-get="/contacts/1" hx-swap="outerHTML">Cancel</button>
</form>

When HTMX Wins

• Server-rendered apps that need interactivity — add AJAX, live search, inline editing without a JavaScript framework
• CRUD admin panels — table actions, form submissions, modals
• Progressive enhancement — works without JavaScript, better with it
• Small teams / solo developers — one language (server-side), no frontend build step
• PHP, Python, Ruby, Go backends — pairs naturally with any server language
• Content-heavy sites needing some interactivity — blogs, documentation, e-commerce catalogs

When NOT to Use HTMX

• Complex client-side state — drag-and-drop, collaborative editing, spreadsheet-like UIs
• Offline-capable apps — HTMX needs the server for every interaction
• Heavy client-side computation — image editors, games, data visualization
• Native mobile + web with shared logic — React Native shares code with React
• Real-time collaborative features — HTMX supports SSE/WebSockets but complex real-time state is better handled with dedicated libraries

HTMX vs React/Vue: Honest Comparison

Frequently Asked Questions