https://www.django-unicorn.com/

 
[book] Docs [video] Screencasts [tool] Examples [twitter]  
Discuss
Star
Sponsor
[unicorn]

Unicorn

A magical full-stack framework for Django 

New 0.28.0 re-fires poll methods when a tab regains focus.
See the changelog for more details. 

[layout]

Add modern site functionality

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

[watch]

Skip the JavaScript build tools

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

[zap]

No API required

Building a feature-rich API is complicated. Skip creating a bunch of
serializers and just use Django.

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

[                    ]
Add  

Clear  all tasks

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

  * 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).

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.

[unicorn-mo]

  * [book] Docs
  * [video] Screencasts
  * [tool] Examples
  * [link] Articles
  * [heart] Current Sponsors

  * [heart] Sponsor
  * [download] PyPI
  * [github] GitHub
  * [twitter] Twitter

  * [zap] Unicorn Logo
  * [feather] Feather Icons
  * [layers] Bulma CSS
  * [link] python-utils.com