The magical reactive component framework for Django β¨
    [](#contributors-) [Unicorn](https://www.django-unicorn.com) adds modern reactive component functionality to your Django templates without having to learn a new templating language or fight with complicated JavaScript frameworks. It seamlessly extends Django past its server-side framework roots without giving up all of its niceties or forcing you to rebuild your application. With Django Unicorn, you can quickly and easily add rich front-end interactions to your templates, all while using the power of Django. **[https://www.django-unicorn.com](https://www.django-unicorn.com) has extensive documentation, code examples, and more!** ## β‘ Getting started ### 1. [Install the package](https://www.django-unicorn.com/docs/installation/) Use your favorite package manager to install `Unicorn`: - `uv add django-unicorn` - `pip install django-unicorn` - `poetry add django-unicorn` ### 2. Add `django_unicorn` to `INSTALLED_APPS` ```python # settings.py INSTALLED_APPS = ( # other apps "django_unicorn", ) ``` ### 3. Update urls.py ```python # urls.py import django_unicorn urlpatterns = ( # other urls path("unicorn/", include("django_unicorn.urls")), ) ``` ### 4. Add `Unicorn` to the HTML template ```html {% load unicorn %} {% unicorn_scripts %} {% csrf_token %} ``` ### 5. [Create a component](https://www.django-unicorn.com/docs/components/) `python manage.py startunicorn myapp COMPONENT_NAME` `Unicorn` uses the term "component" to refer to a set of interactive functionality that can be put into templates. A component consists of a Django HTML template and a Python view class which contains the backend code. After running the management command, two new files will be created: - `myapp/templates/unicorn/COMPONENT_NAME.html` (component template) - `myapp/components/COMPONENT_NAME.py` (component view) ### 6. Add the component to your template ```html {% load unicorn %} {% unicorn_scripts %} {% csrf_token %} {% unicorn 'COMPONENT_NAME' %} ``` ## [Example todo component](https://www.django-unicorn.com/examples/todo) The `unicorn:` attributes bind the element to data and can also trigger methods by listening for events, e.g. `click`, `input`, `keydown`, etc. ```html{% if tasks %}
