Unicorn

A magical full-stack framework for Django ✨

New Lots of fixes for direct views, nested components, and type annotations in 0.60.0.
See the changelog for more details. 🎉

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 feature-rich API is complicated. Skip creating a bunch of serializers and just use Django.

Sponsored By

Create your first component

  1. Install Unicorn
  2. Create a component
  3. Load the Unicorn templatetag with {% load unicorn %} and 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 Unicorn.

Wait, is this magic?

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

  • Unicorn progressively enhances a normal Django view, so the initial render of components is fast and great for SEO.
  • Next, Unicorn binds to the elements you specify and automatically makes AJAX calls when needed.
  • Then, 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 ~8 KB gzipped.

Sponsoring

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

Using other frontend frameworks with Django

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

Support Unicorn on GitHub

Sponsor Unicorn