Django Unicorn

3 weeks ago 2

New Adds inline template html and resolved methods to components in 0.61.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.

Create your first component

Install Unicorn
Create a component
Load the Unicorn templatetag with {% load unicorn %} and add the component to your template with {% unicorn 'component-name' %}
🎉

Example "todo" component

<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 = ""

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):

My undying appreciation and a warm glow from helping support open-source projects for Django.
Listed on django-unicorn.com/sponsors.
Prioritized handling of bugs and issues in GitHub.
Access to additional screencasts detailing advanced use-cases for Unicorn (coming soon).