303d4db7ba
As we've now removed the docs from the README, I think we should make a little more effort to send people to the docs. Here's a trick to do that in markdown, using a header and a table. |
||
|---|---|---|
| .github | ||
| benchmarks | ||
| docs | ||
| logo | ||
| sampleproject | ||
| scripts | ||
| src | ||
| tests | ||
| .gitignore | ||
| .pre-commit-config.yaml | ||
| CHANGELOG.md | ||
| CODE_OF_CONDUCT.md | ||
| LICENSE | ||
| MANIFEST.in | ||
| mkdocs.yml | ||
| pyproject.toml | ||
| README.md | ||
| requirements-ci.in | ||
| requirements-ci.txt | ||
| requirements-dev.in | ||
| requirements-dev.txt | ||
| requirements-docs.txt | ||
| tox.ini | ||
| Read the full documentation |
Django-components is a package that introduces component-based architecture to Django's server-side rendering. It aims to combine Django's templating system with the modularity seen in modern frontend frameworks.
Features
- 🧩 Reusability: Allows creation of self-contained, reusable UI elements.
- 📦 Encapsulation: Each component can include its own HTML, CSS, and JavaScript.
- 🚀 Server-side rendering: Components render on the server, improving initial load times and SEO.
- 🐍 Django integration: Works within the Django ecosystem, using familiar concepts like template tags.
- ⚡ Asynchronous loading: Components can render independently opening up for integration with JS frameworks like HTMX or AlpineJS.
Potential benefits:
- 🔄 Reduced code duplication
- 🛠️ Improved maintainability through modular design
- 🧠 Easier management of complex UIs
- 🤝 Enhanced collaboration between frontend and backend developers
Django-components can be particularly useful for larger Django projects that require a more structured approach to UI development, without necessitating a shift to a separate frontend framework.
Quickstart
django-components lets you create reusable blocks of code needed to generate the front end code you need for a modern app.
Define a component in components/calendar/calendar.py like this:
@register("calendar")
class Calendar(Component):
template_name = "template.html"
def get_context_data(self, date):
return {"date": date}
With this template.html file:
<div class="calendar-component">Today's date is <span>{{ date }}</span></div>
Use the component like this:
{% component "calendar" date="2024-11-06" %}{% endcomponent %}
And this is what gets rendered:
<div class="calendar-component">Today's date is <span>2024-11-06</span></div>
| Read the full documentation |
... or jump right into the code, check out the example project)
Release notes
Read the Release Notes to see the latest features and fixes.
Community examples
One of our goals with django-components is to make it easy to share components between projects. If you have a set of components that you think would be useful to others, please open a pull request to add them to the list below.
- django-htmx-components: A set of components for use with htmx. Try out the live demo.
Contributing and development
Get involved or sponsor this project - See here
Running django-components locally for development - See here