HTMX Best Practices

Build production-ready HTMX applications with these proven best practices.

1. Structure Your HTML Partials

templates/
├── base.html
├── pages/
│   ├── index.html
│   └── dashboard.html
└── partials/
    ├── user_list.html
    ├── user_item.html
    └── navigation.html

2. Use Semantic HTTP Methods

<!-- Use correct HTTP verbs -->
<button hx-get="/users">Get Users</button>
<form hx-post="/users">Create User</form>
<button hx-put="/users/1">Update User</button>
<button hx-delete="/users/1">Delete User</button>

3. Handle Errors Gracefully

from django.http import HttpResponse

def my_view(request):
    try:
        # Process request
        return render(request, 'success.html')
    except Exception as e:
        response = render(request, 'error.html', {'error': str(e)})
        response.status_code = 400
        return response

4. Add Loading States

<button hx-get="/data">
    <span class="htmx-indicator">
        <svg class="spinner">...</svg>
    </span>
    <span>Load Data</span>
</button>

<style>
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }
.htmx-request > span:not(.htmx-indicator) { display: none; }
</style>

5. Implement CSRF Protection

<!-- Django -->
<form hx-post="/submit">
    {% csrf_token %}
    <!-- Form fields -->
</form>

6. Use Progressive Enhancement

<!-- Works without JavaScript -->
<form action="/submit" method="POST"
      hx-post="/submit"
      hx-target="#result">
    <button>Submit</button>
</form>

7. Optimize Performance

<!-- Debounce search -->
<input hx-get="/search"
       hx-trigger="keyup changed delay:500ms" />

<!-- Cancel previous requests -->
<input hx-get="/search"
       hx-trigger="keyup changed delay:300ms"
       hx-sync="this:abort" />

8. Add Proper Headers

def my_view(request):
    response = render(request, 'partial.html')
    response['HX-Trigger'] = 'itemUpdated'
    response['HX-Push-Url'] = '/new-url'
    return response

9. Test Your HTMX Interactions

def test_load_users(client):
    response = client.get('/users', HTTP_HX_REQUEST='true')
    assert response.status_code == 200
    assert 'user_list.html' in response.template_name

10. Monitor and Log

import logging
logger = logging.getLogger(__name__)

def my_view(request):
    logger.info(f'HTMX request: {request.path}')
    # Process request

Security Checklist

• CSRF protection enabled
• Input validation on server
• Rate limiting implemented
• Authentication checked
• Authorization enforced
• SQL injection prevented
• XSS protection active

Performance Checklist

• Responses are small and focused
• Database queries optimized
• Caching implemented where appropriate
• Debouncing on frequent requests
• Request cancellation on rapid inputs
• Gzip compression enabled
• CDN for static assets

Conclusion

Follow these best practices to build maintainable, secure, and performant HTMX applications. Start simple, measure, optimize.