HTMX Common Patterns

Learn how to implement common UI patterns with HTMX.

Pattern 1: Infinite Scroll

<div id="content">
    <!-- Initial items -->
</div>

<div hx-get="/items?page=2"
     hx-trigger="revealed"
     hx-swap="afterend"
     hx-target="#content">
    <p>Loading more...</p>
</div>

Pattern 2: Modal Dialog

<button hx-get="/modal/edit/1"
        hx-target="#modal"
        hx-swap="innerHTML">
    Edit
</button>

<div id="modal" class="modal"></div>

<!-- Server returns -->
<div class="modal-content">
    <h2>Edit Item</h2>
    <form hx-put="/items/1">
        <!-- Form fields -->
    </form>
</div>

Pattern 3: Live Search

<input type="search"
       name="query"
       hx-get="/search"
       hx-trigger="keyup changed delay:500ms"
       hx-target="#results"
       placeholder="Search..." />

<div id="results"></div>

Pattern 4: Inline Edit

<div hx-target="this" hx-swap="outerHTML">
    <span>{{ item.name }}</span>
    <button hx-get="/edit/{{ item.id }}">Edit</button>
</div>

<!-- Server returns when editing -->
<form hx-put="/update/{{ item.id }}"
      hx-target="this"
      hx-swap="outerHTML">
    <input name="name" value="{{ item.name }}" />
    <button>Save</button>
    <button hx-get="/cancel/{{ item.id }}">Cancel</button>
</form>

Pattern 5: Form Validation

<form hx-post="/submit">
    <input name="email"
           hx-post="/validate/email"
           hx-trigger="blur"
           hx-target="next .error" />
    <span class="error"></span>

    <button>Submit</button>
</form>

Pattern 6: Polling

<div hx-get="/status"
     hx-trigger="every 2s"
     hx-swap="innerHTML">
    Checking status...
</div>

Pattern 7: Dependent Dropdowns

<select name="country"
        hx-get="/cities"
        hx-target="#city-select">
    <option value="us">United States</option>
    <option value="ca">Canada</option>
</select>

<select id="city-select" name="city">
    <option>Select country first</option>
</select>

Pattern 8: Optimistic Updates

<button hx-post="/like"
        hx-swap="outerHTML"
        hx-disabled-elt="this">
    <span class="htmx-indicator">Liking...</span>
    Like ({{ count }})
</button>

These patterns cover 90% of common UI needs. Simple, effective, no JavaScript required!