🧠 HTMX + Alpine.js + Django Cheatsheet

✅ Include in Template

<!-- Include HTMX -->
<script src="https://unpkg.com/htmx.org@1.9.2"></script>

<!-- Include Alpine.js -->
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>

---

🔁 HTMX Basics

GET request

<button hx-get="/some-url/" hx-target="#result">Load Data</button>
<div id="result"></div>

POST with Form

<form hx-post="/submit/" hx-target="#message" hx-swap="outerHTML">
  {% csrf_token %}
  <input name="email" type="email">
  <button type="submit">Submit</button>
</form>

<div id="message"></div>

Swap Strategies

<button hx-get="/load/" hx-swap="beforeend" hx-target="#list">Add Item</button>
<div id="list"></div>

---

⚡ HTMX Events

<div 
  hx-get="/check/" 
  hx-trigger="click" 
  hx-target="#status" 
  hx-indicator="#loading"
>
  Check Status
</div>

<div id="loading" style="display:none;">Loading...</div>
<div id="status"></div>

---

🎯 Alpine.js Basics

<div x-data="{ open: false }">
  <button @click="open = !open">Toggle</button>
  <div x-show="open" x-transition>
    I am visible when open!
  </div>
</div>

---

🔁 HTMX + Alpine.js Integration

<div 
  x-data="{ items: [] }"
  hx-get="/items/"
  hx-trigger="load"
  hx-target="#item-list"
  hx-swap="innerHTML"
>
  <ul id="item-list">
    <!-- Django renders items here -->
  </ul>
</div>

---

🐍 Django View (Python)

from django.http import HttpResponse
from django.template.loader import render_to_string

def some_view(request):
    context = {'data': 'Hello HTMX'}
    html = render_to_string("partials/snippet.html", context)
    return HttpResponse(html)

---

🧩 Django Template Snippet

<!-- templates/partials/snippet.html -->
<div>{{ data }}</div>

---

🔒 CSRF with HTMX in Django

<!-- In your base template -->
<script>
  document.body.addEventListener('htmx:configRequest', (event) => {
    event.detail.headers['X-CSRFToken'] = '{{ csrf_token }}';
  });
</script>

---

📦 Bonus: Load Component Dynamically

<button 
  hx-get="/component/" 
  hx-target="#modal" 
  hx-swap="innerHTML"
>
  Load Modal
</button>

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

---