---
url: https://lune-js.com/integrations/django.md
---
# Django Integration Guide
Lune is an excellent companion for Django applications. It allows you to add interactivity to your templates while keeping your backend logic in Python.
## Installation
The easiest way to use Lune in Django is by adding a `
```
## Data Injection
You can pass data from your Django views directly into `lu-scope` by serializing it as JSON.
### In your Django View:
```python
import json
from django.shortcuts import render
def profile_view(request):
user_data = {
'username': request.user.username,
'email': request.user.email,
'is_premium': True
}
return render(request, 'profile.html', {
'user_json': json.dumps(user_data)
})
```
### In your Django Template:
Use the `safe` filter to prevent Django from escaping the JSON string.
```html
Username: {{ username }}
Premium User Badge
```
## CSRF Token Handling
Django requires a CSRF token for any POST, PUT, or DELETE requests.
### Option 1: Reading from Meta Tag
Add the token to a meta tag in your `base.html`:
```html
```
Then access it in your Lune methods:
```js
function submitForm() {
const token = document.querySelector('meta[name="csrf-token"]').content;
fetch("/api/save/", {
method: "POST",
headers: {
"X-CSRFToken": token,
"Content-Type": "application/json"
},
body: JSON.stringify(this.formData)
});
}
```
## Practical Examples
### 1. Progressive Form Validation
Enhance your existing Django forms with real-time validation.
```html
```
> \[!TIP]
> Derived values such as `isValid` live in a factory function: an object literal written inside
> `lu-scope` holds data only, so getters and methods go in JavaScript.
### 2. Dynamic Dependent Dropdowns
Update a second dropdown based on the selection of the first.
```html
```
## Handling Template Conflicts
Since both Django and Lune use {{ }} for interpolation, you have two options:
### 1. Escape the braces
Wrap the Lune content in `{% verbatim %}` tags.
```html
{% verbatim %}
{{ pico_vue_variable }}
{% endverbatim %}
```
### 2. Change Lune delimiters
Configure Lune to use different delimiters.
```js
createApp({
$delimiters: ["[[", "]]"]
}).mount();
```
Template:
```html