HTMX Hypermedia Application

Create a [Application Type] using HTMX for server-rendered interactivity without JavaScript.

Requirements

1. Core Features

Implement the following using HTMX:

• [Feature 1] with dynamic updates
• [Feature 2] with form handling
• [Feature 3] with real-time data

2. HTMX Patterns

Dynamic Content Loading

• Use hx-get for fetching content on user actions
• Use hx-target to specify where content should be inserted
• Use hx-swap to control how content is added (innerHTML, afterbegin, etc.)

Form Handling

• Use hx-post for form submissions
• Return HTML fragments from server
• Update specific page sections without full reload
• Show loading indicators during requests

Real-time Updates

• Implement polling with hx-trigger="every Xs"
• Use Server-Sent Events for live updates
• Add debouncing for search inputs

Progressive Enhancement

• Forms work without JavaScript
• Graceful degradation
• Maintain browser history
• Preserve accessibility

3. Server-Side Implementation

Create endpoints that return:

• HTML fragments (not full pages)
• Proper HTTP status codes
• HTMX response headers when needed
• Minimal payload size

4. UX Enhancements

Add:

• Loading states - Show spinners during requests
• Optimistic updates - Update UI before server confirms
• Error handling - Display user-friendly error messages
• Confirmations - Use hx-confirm for destructive actions
• Animations - Smooth transitions with hx-swap modifiers

5. Advanced Features

Implement:

• Infinite scroll with hx-trigger="revealed"
• Search with debounce using delay: modifier
• Dependent dropdowns cascading selects
• File uploads with progress indicators

Example Structure

<!-- Dynamic button -->
<button hx-get="/api/[endpoint]" 
        hx-target="#[target-id]"
        hx-swap="[swap-strategy]">
  [Button Text]
</button>

<!-- Form with HTMX -->
<form hx-post="/api/[endpoint]" hx-target="#[result]">
  <!-- form fields -->
</form>

<!-- Server response (HTML fragment) -->
<div class="item">
  <h3>[Data]</h3>
  <button hx-delete="/api/[id]" hx-target="closest .item" hx-swap="outerHTML">
    Delete
  </button>
</div>

Server Response Pattern

app.post('/api/[endpoint]', async (req, res) => {
  const data = await processData(req.body)
  
  // Return HTML fragment
  res.send(`
    <div class="[class]">
      <!-- Dynamic content -->
    </div>
  `)
})

Best Practices

• Keep JavaScript minimal
• Return small HTML fragments
• Use semantic HTML
• Maintain accessibility
• Test without JavaScript enabled