Htmx Developer

HTMX is ideal when:
  ✓ Content-focused applications (dashboards, admin panels, CMS, e-commerce)
  ✓ CRUD-heavy workflows (forms, tables, lists)
  ✓ Server-rendered applications that need dynamic UX upgrades
  ✓ Small teams that want to move fast without frontend complexity
  ✓ Progressive enhancement matters (works without JS, better with JS)

HTMX is NOT ideal when:
  ✗ Rich client-side interactivity (drawing tools, spreadsheets, IDEs)
  ✗ Offline-first applications (HTMX requires server connectivity)
  ✗ Complex client-side state (drag-and-drop reordering, real-time collaboration)
  ✗ Native mobile apps (no HTML rendering)

<!-- GET request, replace inner content -->
<button hx-get="/api/users" hx-target="#user-list" hx-swap="innerHTML">
  Load Users
</button>
<div id="user-list"><!-- Users will appear here --></div>

<!-- POST request with form data -->
<form hx-post="/api/users" hx-target="#user-list" hx-swap="afterbegin">
  <input name="email" type="email" required>
  <button type="submit">Add User</button>
</form>

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

<!-- PUT for inline editing -->
<div hx-get="/api/users/123/edit" hx-trigger="click" hx-swap="outerHTML">
  Click to edit: John Doe
</div>

<!-- Standard triggers -->
<input hx-get="/search" hx-trigger="keyup changed delay:300ms" hx-target="#results">

<!-- Revealed trigger (lazy loading) -->
<div hx-get="/api/comments?page=2" hx-trigger="revealed" hx-swap="afterend">
  Loading more comments...
</div>

<!-- Intersection observer (more control than revealed) -->
<div hx-get="/api/feed/next" hx-trigger="intersect once threshold:0.5">
  Loading...
</div>

<!-- Polling -->
<div hx-get="/api/notifications/count" hx-trigger="every 30s">
  0 notifications
</div>

<!-- Server-sent events -->
<div hx-ext="sse" sse-connect="/api/events" sse-swap="message">
  Waiting for updates...
</div>

<!-- Load trigger (fires on page load) -->
<div hx-get="/api/dashboard/stats" hx-trigger="load">
  Loading stats...
</div>

<!-- Custom events -->
<div hx-get="/api/cart" hx-trigger="cart-updated from:body">
  Cart contents here
</div>

# Python (Flask) example
@app.route('/api/users', methods=['GET'])
def list_users():
    users = User.query.all()
    # Return ONLY the HTML fragment, not a full page
    return render_template('partials/user-list.html', users=users)

@app.route('/api/users', methods=['POST'])
def create_user():
    user = User(email=request.form['email'])
    db.session.add(user)
    db.session.commit()
    # Return the new row to be inserted
    return render_template('partials/user-row.html', user=user)

@app.route('/api/users/<int:id>', methods=['DELETE'])
def delete_user(id):
    User.query.get_or_404(id).delete()
    db.session.commit()
    # Return empty string - htmx will remove the target element
    return ''

// Go (net/http) example
func handleSearch(w http.ResponseWriter, r *http.Request) {
    query := r.URL.Query().Get("q")
    results := searchProducts(query)

    // Check if this is an HTMX request
    if r.Header.Get("HX-Request") == "true" {
        // Return only the results fragment
        tmpl.ExecuteTemplate(w, "search-results", results)
        return
    }
    // Full page for non-HTMX requests (progressive enhancement)
    tmpl.ExecuteTemplate(w, "search-page", results)
}

from flask import make_response

@app.route('/api/users', methods=['POST'])
def create_user():
    user = create_user_from_form(request.form)
    response = make_response(render_template('partials/user-row.html', user=user))

    # Retarget: supersede hx-target from the client
    response.headers['HX-Retarget'] = '#user-table tbody'

    # Reswap: supersede hx-swap strategy
    response.headers['HX-Reswap'] = 'afterbegin'

    # Trigger: fire a client-side event
    response.headers['HX-Trigger'] = 'showToast'
    # Or with data:
    response.headers['HX-Trigger'] = json.dumps({
        'showToast': {'message': 'User created', 'type': 'success'}
    })

    # Redirect: full page navigation
    # response.headers['HX-Redirect'] = '/users'

    # Push URL: update browser URL bar without full navigation
    response.headers['HX-Push-Url'] = f'/users/{user.id}'

    return response

<input type="search"
       name="q"
       placeholder="Search products..."
       hx-get="/search"
       hx-trigger="input changed delay:300ms, search"
       hx-target="#search-results"
       hx-indicator="#search-spinner">

<span id="search-spinner" class="htmx-indicator">Searching...</span>
<div id="search-results"></div>

<!-- Server returns rows + a new sentinel at the bottom -->
<table id="users-table">
  <tbody>
    <tr><td>User 1</td></tr>
    <tr><td>User 2</td></tr>
    <!-- ... more rows ... -->

    <!-- Sentinel row: loads next page when visible -->
    <tr hx-get="/api/users?page=2"
        hx-trigger="revealed"
        hx-swap="outerHTML"
        hx-select="tbody > tr">
      <td>Loading more...</td>
    </tr>
  </tbody>
</table>

<!-- View mode -->
<div id="user-123" hx-get="/api/users/123/edit" hx-trigger="click" hx-swap="outerHTML">
  <strong>John Doe</strong>
  <span>john@example.com</span>
  <small>(click to edit)</small>
</div>

<!-- Edit mode (returned by GET /api/users/123/edit) -->
<form id="user-123" hx-put="/api/users/123" hx-swap="outerHTML">
  <input name="name" value="John Doe">
  <input name="email" value="john@example.com">
  <button type="submit">Save</button>
  <button hx-get="/api/users/123" hx-swap="outerHTML" hx-target="#user-123">Cancel</button>
</form>

<!-- After save (returned by PUT /api/users/123) - back to view mode -->
<div id="user-123" hx-get="/api/users/123/edit" hx-trigger="click" hx-swap="outerHTML">
  <strong>John Doe</strong>
  <span>john@example.com</span>
  <small>(click to edit)</small>
</div>

<form hx-post="/api/users/bulk-delete" hx-target="#user-table" hx-swap="innerHTML"
      hx-confirm="Delete selected users?">
  <table id="user-table">
    <thead>
      <tr>
        <th><input type="checkbox" onclick="toggleAll(this)"></th>
        <th>Name</th>
        <th>Email</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td><input type="checkbox" name="ids" value="1"></td>
        <td>John</td>
        <td>john@example.com</td>
      </tr>
      <!-- more rows -->
    </tbody>
  </table>
  <button type="submit">Delete Selected</button>
</form>

<script>
function toggleAll(source) {
  document.querySelectorAll('input[name="ids"]').forEach(cb => cb.checked = source.checked);
}
</script>

<div class="tabs" hx-target="#tab-content" hx-swap="innerHTML" hx-push-url="true">
  <a hx-get="/tabs/overview" class="active">Overview</a>
  <a hx-get="/tabs/settings">Settings</a>
  <a hx-get="/tabs/billing">Billing</a>
</div>
<div id="tab-content">
  <!-- Tab content loaded here -->
</div>

<!-- Without JS: normal form submission (full page reload) -->
<!-- With HTMX: partial update, no page reload -->
<form method="post" action="/api/users"
      hx-post="/api/users"
      hx-target="#user-list"
      hx-swap="afterbegin">
  <input name="email" type="email" required>
  <button type="submit">Add User</button>
</form>

<!-- Without JS: normal link navigation -->
<!-- With HTMX: partial page load -->
<a href="/users/123"
   hx-get="/users/123"
   hx-target="#main-content"
   hx-push-url="true">
  View User
</a>

@app.route('/users/<int:id>')
def get_user(id):
    user = User.query.get_or_404(id)
    if request.headers.get('HX-Request'):
        return render_template('partials/user-detail.html', user=user)
    return render_template('full-page/user-detail.html', user=user)

<form hx-post="/api/users"
      hx-target="#user-list"
      hx-target-422="#form-errors"
      hx-target-500="#server-error"
      hx-ext="response-targets">
  <div id="form-errors"></div>
  <input name="email" type="email" required>
  <button type="submit">Add User</button>
</form>
<div id="server-error"></div>