Server-Driven Navigation for HTMX in Django

from django.shortcuts import get_object_or_404
from htmx_nav import Swap, make_shell_renderer

# Defined once, reused by every view in the app
render_shell = make_shell_renderer(lambda request: [
    Swap("components/_sidebar.html", {"user": request.user}, target_id="sidebar"),
    Swap("components/_breadcrumbs.html", target_id="breadcrumbs"),
])


def project_board(request, project_id):
    project = get_object_or_404(Project, id=project_id)

    # Sidebar & breadcrumbs come along for free, every time
    return render_shell(
        request,
        "pages/board.html",
        {"project": project},
        extra_swaps=Swap(
            "components/_status_badge.html",
            target_id="project-status",
        ),
    )

from django.views.generic import DetailView
from htmx_nav import Swap, make_shell_view_mixin

# Built from the same `render_shell` defined for function-based views
ShellViewMixin = make_shell_view_mixin(render_shell)


class ProjectBoardView(ShellViewMixin, DetailView):
    model = Project
    template_name = "pages/board.html"
    context_object_name = "project"

    def get_extra_swaps(self):
        # Sidebar & breadcrumbs come from the shell; extras go here
        return Swap(
            "components/_status_badge.html", 
            target_id="project-status"
        )

from django.contrib import messages
from django.shortcuts import get_object_or_404
from htmx_nav import Swap, has_messages, render_nav


def delete_ticket(request, ticket_id):
    ticket = get_object_or_404(Ticket, id=ticket_id)
    ticket.delete()
    messages.success(request, f"Ticket #{ticket_id} deleted.")

    # No navigation involved, just OOB updates alongside the response
    return render_nav(
        request,
        "tickets/empty_state.html",
        partial=None,
        swaps=[
            Swap.delete(f"ticket-row-{ticket_id}"),
            Swap.text(
                "open-tickets-count",
                str(Ticket.objects.filter(status="open").count()),
            ),
            Swap(
                "components/_messages.html",
                target_id="messages",
                include_if=has_messages,
            ),
        ],
    )