django-unicorn

A magical full-stack framework for Django ✨

New Version 0.10.0 is now released. πŸŽ‰ See the changelog for new features.

Add modern site functionality

Quickly add in simple interactions to regular Django templates without learning a new templating language.

Skip the Javascript build tools

Stop fighting with a new Javascript build tool and separate process to use yet another frontend framework.

No API required

Building a complete API is complicated and complex. Skip creating a bunch of serializers and just use Django.

Create your first component

  1. Install django-unicorn
  2. Create a component
  3. Add the component to your template with {% unicorn 'component-name' %}
  4. πŸŽ‰

Example todo component

Β Β 

No tasks πŸŽ‰

<!-- unicorn/templates/unicorn/todo.html -->
<div>
  <form unicorn:submit.prevent="add">
    <input type="text"
      unicorn:model.defer="task"
      unicorn:keyup.escape="task=''"
      placeholder="New task" id="task"></input>
  </form>
  <button unicorn:click="add">Add</button>
  <button unicorn:click="reset">Clear all tasks</button>

  <p>
    {% if tasks %}
      <ul>
        {% for task in tasks %}
          <li>{{ task }}</li>
        {% endfor %}
      </ul>
    {% else %}
      No tasks πŸŽ‰
    {% endif %}
  </p>
</div>

# unicorn/components/todo.py
from django_unicorn.components import UnicornView
from django import forms

class TodoForm(forms.Form):
    task = forms.CharField(min_length=2, max_length=20, required=True)

class TodoView(UnicornView):
    task = ""
    tasks = []

    def add(self):
        if self.is_valid():
            self.tasks.append(self.task)
            self.task = ""

Other example components. Or read all of the documentation about how to use django-unicorn.

Wait, is this magic?

Sort of! At least it might feel like it. 🀩

  • django-unicorn progressively enhances a normal Django view, so the initial render of components is fast and great for SEO.
  • Next, django-unicorn binds to the elements you specify and automatically makes AJAX calls when needed.
  • Then, django-unicorn dynamically updates the DOM.

The end result is that you can focus on writing regular Django templates and Python classes without needing to switch to another language or build unnecessary plumbing. Best of all, the Javascript portion is a paltry ~6 KB gzipped.

Sponsoring

Help encourage development for more features and bug fixes on django-unicorn by sponsoring me on GitHub. Sponsorship benefits (some are dependant on the sponsorship level):

Using other frontend frameworks with Django

Not convinced using django-unicorn is for you? Check out some other approaches to integrate Django with a frontend framework.