cotton
for
Getting Started
Examples
More

Goodbye {% extends %} {% block %} {% include %} {% custom_tag %}
Hello <c-component />

Bringing component-based design to django templates

Before: Strongly Coupled, Verbose

{% extends "product_layout.html" %}

{% block img_url %}
icon.png
{% endblock %}

{% block header %}
Item Title
{% endblock %}

{% block content %}
    Description of the product

    {% block price %}
    $10
    {% endblock %}
{% endblock %}
<div id="container">
    <div id="header">
        <img src="{% block img_url %}{% endblock %}" />
        <h1>
            {% block title %}
            {% endblock %}
        </h1>
    </div>

    <div id="content">
        {% block content %}

            <div id="price">
                {% block price %}
                {% endblock %}
            </div>

        {% endblock %}
    </div>
</div>

After: Decoupled, Clean & Re-usable

<c-product img_url="icon.png"
    title="Item Title"
    price="$10">
    Description of the product
</c-product>
<div id="container">
    <div id="header">
        <img src="{{ img_url }}" />
        <h1>{{ title }}</h1>
    </div>

    <div id="content">
        {{ slot }}

        {% if price %}
            <div id="price">
                {{ price }}
            </div>
        {% endif %}
    </div>
</div>

Why cotton?

Rapid UI composition
Efficiently compose and reuse UI components. Adopting a modular design system streamlines workflow and boosts productivity.
Harmonious with Tailwind CSS
Tailwind's utility-first approach compliments component based design - isolating style in re-usable components, enhancing maintainability.
{%
Interoperable with Django Templates
Cotton enhances Django templates without replacing them, allowing progressive enhancement while maintaining full use of existing template features.
Enhanced Productivity
Cotton's HTML tag-like syntax allows code editors to recognize its components as HTML elements, enabling features like syntax highlighting and automatic tag completion.
Minimal Overhead
Cotton compiles to native django components and the compilation step is automatically cached and dynamically managed.
next Quickstart