Skip to content

Django + flux-htmx

Setup

<!-- base.html -->
<meta name="csrf-token" content="{% csrf_token %}" />
<meta name="flux-config" content='{"csrf":{"strategy":"meta","headerName":"X-CSRFToken"}}' />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flux-htmx@2/dist/flux.min.css" />
<script src="https://cdn.jsdelivr.net/npm/flux-htmx@2/dist/flux.full.iife.js" defer></script>

A delete button

# views.py
from django.views.decorators.http import require_POST

@require_POST
def item_delete(request, pk):
    Item.objects.filter(pk=pk, owner=request.user).delete()
    return HttpResponse(status=200)
<button
  fx-delete="{% url 'item-delete' item.pk %}"
  fx-confirm="Delete?"
  fx-toast
  fx-success="Deleted"
  fx-remove-target="closest tr"
>
  Delete
</button>

Search with partials

def search(request):
    q = request.GET.get("q", "")
    return render(request, "partials/results.html", {"items": Item.objects.filter(name__icontains=q)})
<input fx-search="{% url 'search' %}" fx-target="#results" hx-trigger="input changed delay:300ms" />
<div id="results">{% include "partials/results.html" %}</div>

CSRF

Django's X-CSRFToken header mapping is shown above — that's the whole integration. See the CSRF guide.

Runnable app: examples/django/