Welcome to Django Components
django-components introduces component-based architecture to Django's server-side rendering. It combines Django's templating system with the modularity seen in modern frontend frameworks like Vue or React.
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:
Use the component like this:
And this is what gets rendered:
Read on to learn about all the exciting details and configuration possibilities!
(If you instead prefer to 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