Read more about HTML attributes.
django-components makes integration with HTMX, AlpineJS or jQuery easy by allowing components to be rendered as HTML fragments:
Components's JS and CSS is loaded automatically when the fragment is inserted into the DOM.
Expose components as views with get, post, put, patch, delete methods
Read more about HTML attributes.
django-components makes integration with HTMX, AlpineJS or jQuery easy by allowing components to be rendered as HTML fragments:
Components's JS and CSS is loaded automatically when the fragment is inserted into the DOM.
Expose components as views with get, post, put, patch, delete methods
Automatically create an endpoint for the component with Component.Url.public
# components/calendar/calendar.py
@register("calendar")
class Calendar(Component):
template_file = "calendar.html"
- class View:
- def get(self, request, *args, **kwargs):
- page = request.GET.get("page", 1)
- return self.component.render_to_response(
- request=request,
- kwargs={
- "page": page,
- }
- )
-
- def get_context_data(self, page):
- return {
- "page": page,
- }
-
-# urls.py
-path("calendar/", Calendar.as_view()),
+ class Url:
+ public = True
+
+ class View:
+ def get(self, request, *args, **kwargs):
+ page = request.GET.get("page", 1)
+ return self.component.render_to_response(
+ request=request,
+ kwargs={
+ "page": page,
+ }
+ )
+
+ def get_context_data(self, page):
+ return {
+ "page": page,
+ }
+
+# Get auto-generated URL for the component
+url = get_component_url(Calendar)
+
+# Or define explicit URL in urls.py
+path("calendar/", Calendar.as_view())
Opt-in to type hints by defining types for component's args, kwargs, slots, and more:
from typing import NotRequired, Tuple, TypedDict, SlotContent, SlotFunc
ButtonArgs = Tuple[int, str]
@@ -199,4 +205,4 @@
{% calendar date="2024-11-06" %}
{% endcalendar %}
-Our aim is to be at least as fast as Django templates.
As of 0.130, django-components is ~4x slower than Django templates.
| Render time | |
|---|---|
| django | 68.9±0.6ms |
| django-components | 259±4ms |
See the full performance breakdown for more information.
Read the Release Notes to see the latest features and fixes.
One of our goals with django-components is to make it easy to share components between projects. Head over to the Community examples to see some examples.
Get involved or sponsor this project - See here
Running django-components locally for development - See here