| Name | django-components JSON |
| Version |
0.127
JSON |
| download |
| home_page | None |
| Summary | A way to create simple reusable template components in Django. |
| upload_time | 2025-02-01 10:16:37 |
| maintainer | None |
| docs_url | None |
| author | None |
| requires_python | <4.0,>=3.8 |
| license | MIT |
| keywords |
django
components
css
js
html
|
| VCS |
 |
| bugtrack_url |
|
| requirements |
No requirements were recorded.
|
| Travis-CI |
No Travis.
|
| coveralls test coverage |
No coveralls.
|
# <img src="https://raw.githubusercontent.com/django-components/django-components/master/logo/logo-black-on-white.svg" alt="django-components" style="max-width: 100%; background: white; color: black;">
[](https://pypi.org/project/django-components/) [](https://pypi.org/project/django-components/) [](https://github.com/django-components/django-components/blob/master/LICENSE/) [](https://pypistats.org/packages/django-components) [](https://github.com/django-components/django-components/actions/workflows/tests.yml)
### <table><td>[Read the full documentation](https://django-components.github.io/django-components/latest/)</td></table>
<!-- TODO - Remove this banner after a month(?), so March 2025 -->
> ⚠️ Attention ⚠️ - We migrated from `EmilStenstrom/django-components` to `django-components/django-components`.
>
> **Repo name and documentation URL changed. Package name remains the same.**
>
> Report any broken links links in [#922](https://github.com/django-components/django-components/issues/922).
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.
A component in django-components can be as simple as a Django template and Python code to declare the component:
```htmldjango title="calendar.html"
<div class="calendar">
Today's date is <span>{{ date }}</span>
</div>
```
```py title="calendar.py"
from django_components import Component
class Calendar(Component):
template_file = "calendar.html"
```
Or a combination of Django template, Python, CSS, and Javascript:
```htmldjango title="calendar.html"
<div class="calendar">
Today's date is <span>{{ date }}</span>
</div>
```
```css title="calendar.css"
.calendar {
width: 200px;
background: pink;
}
```
```js title="calendar.js"
document.querySelector(".calendar").onclick = function () {
alert("Clicked calendar!");
};
```
```py title="calendar.py"
from django_components import Component
class Calendar(Component):
template_file = "calendar.html"
js_file = "calendar.js"
css_file = "calendar.css"
```
Alternatively, you can "inline" HTML, JS, and CSS right into the component class:
```py
from django_components import Component
class Calendar(Component):
template = """
<div class="calendar">
Today's date is <span>{{ date }}</span>
</div>
"""
css = """
.calendar {
width: 200px;
background: pink;
}
"""
js = """
document.querySelector(".calendar").onclick = function () {
alert("Clicked calendar!");
};
"""
```
## Features
1. 🧩 **Reusability:** Allows creation of self-contained, reusable UI elements.
2. 📦 **Encapsulation:** Each component can include its own HTML, CSS, and JavaScript.
3. 🚀 **Server-side rendering:** Components render on the server, improving initial load times and SEO.
4. 🐍 **Django integration:** Works within the Django ecosystem, using familiar concepts like template tags.
5. ⚡ **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:
```python
@register("calendar")
class Calendar(Component):
template_file = "template.html"
def get_context_data(self, date):
return {"date": date}
```
With this `template.html` file:
```htmldjango
<div class="calendar-component">Today's date is <span>{{ date }}</span></div>
```
Use the component like this:
```htmldjango
{% component "calendar" date="2024-11-06" %}{% endcomponent %}
```
And this is what gets rendered:
```html
<div class="calendar-component">Today's date is <span>2024-11-06</span></div>
```
### <table><td>[Read the full documentation](https://django-components.github.io/django-components/latest/)</td></table>
... or jump right into the code, [check out the example project](https://github.com/django-components/django-components/tree/master/sampleproject))
## Release notes
Read the [Release Notes](https://github.com/django-components/django-components/tree/master/CHANGELOG.md)
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](https://github.com/iwanalabs/django-htmx-components): A set of components for use with [htmx](https://htmx.org/). Try out the [live demo](https://dhc.iwanalabs.com/).
- [djc-heroicons](https://pypi.org/project/djc-heroicons/): A component that renders icons from [Heroicons.com](https://heroicons.com/).
## Contributing and development
Get involved or sponsor this project - [See here](https://django-components.github.io/django-components/dev/overview/contributing/)
Running django-components locally for development - [See here](https://django-components.github.io/django-components/dev/overview/development/)
Raw data
{
"_id": null,
"home_page": null,
"name": "django-components",
"maintainer": null,
"docs_url": null,
"requires_python": "<4.0,>=3.8",
"maintainer_email": null,
"keywords": "django, components, css, js, html",
"author": null,
"author_email": "Emil Stenstr\u00f6m <emil@emilstenstrom.se>",
"download_url": "https://files.pythonhosted.org/packages/e9/0c/bc35e4e87abf3e47d14670cf9c0687e1b9f12a94258a7237ba5d407e9c40/django_components-0.127.tar.gz",
"platform": null,
"description": "# <img src=\"https://raw.githubusercontent.com/django-components/django-components/master/logo/logo-black-on-white.svg\" alt=\"django-components\" style=\"max-width: 100%; background: white; color: black;\">\n\n[](https://pypi.org/project/django-components/) [](https://pypi.org/project/django-components/) [](https://github.com/django-components/django-components/blob/master/LICENSE/) [](https://pypistats.org/packages/django-components) [](https://github.com/django-components/django-components/actions/workflows/tests.yml)\n\n### <table><td>[Read the full documentation](https://django-components.github.io/django-components/latest/)</td></table>\n\n<!-- TODO - Remove this banner after a month(?), so March 2025 -->\n> \u26a0\ufe0f Attention \u26a0\ufe0f - We migrated from `EmilStenstrom/django-components` to `django-components/django-components`.\n>\n> **Repo name and documentation URL changed. Package name remains the same.**\n>\n> Report any broken links links in [#922](https://github.com/django-components/django-components/issues/922).\n\nDjango-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.\n\nA component in django-components can be as simple as a Django template and Python code to declare the component:\n\n```htmldjango title=\"calendar.html\"\n<div class=\"calendar\">\n Today's date is <span>{{ date }}</span>\n</div>\n```\n\n```py title=\"calendar.py\"\nfrom django_components import Component\n\nclass Calendar(Component):\n template_file = \"calendar.html\"\n```\n\nOr a combination of Django template, Python, CSS, and Javascript:\n\n```htmldjango title=\"calendar.html\"\n<div class=\"calendar\">\n Today's date is <span>{{ date }}</span>\n</div>\n```\n\n```css title=\"calendar.css\"\n.calendar {\n width: 200px;\n background: pink;\n}\n```\n\n```js title=\"calendar.js\"\ndocument.querySelector(\".calendar\").onclick = function () {\n alert(\"Clicked calendar!\");\n};\n```\n\n```py title=\"calendar.py\"\nfrom django_components import Component\n\nclass Calendar(Component):\n template_file = \"calendar.html\"\n js_file = \"calendar.js\"\n css_file = \"calendar.css\"\n```\n\nAlternatively, you can \"inline\" HTML, JS, and CSS right into the component class:\n\n```py\nfrom django_components import Component\n\nclass Calendar(Component):\n template = \"\"\"\n <div class=\"calendar\">\n Today's date is <span>{{ date }}</span>\n </div>\n \"\"\"\n\n css = \"\"\"\n .calendar {\n width: 200px;\n background: pink;\n }\n \"\"\"\n\n js = \"\"\"\n document.querySelector(\".calendar\").onclick = function () {\n alert(\"Clicked calendar!\");\n };\n \"\"\"\n```\n\n## Features\n\n1. \ud83e\udde9 **Reusability:** Allows creation of self-contained, reusable UI elements.\n2. \ud83d\udce6 **Encapsulation:** Each component can include its own HTML, CSS, and JavaScript.\n3. \ud83d\ude80 **Server-side rendering:** Components render on the server, improving initial load times and SEO.\n4. \ud83d\udc0d **Django integration:** Works within the Django ecosystem, using familiar concepts like template tags.\n5. \u26a1 **Asynchronous loading:** Components can render independently opening up for integration with JS frameworks like HTMX or AlpineJS.\n\nPotential benefits:\n\n- \ud83d\udd04 Reduced code duplication\n- \ud83d\udee0\ufe0f Improved maintainability through modular design\n- \ud83e\udde0 Easier management of complex UIs\n- \ud83e\udd1d Enhanced collaboration between frontend and backend developers\n\nDjango-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.\n\n## Quickstart\n\ndjango-components lets you create reusable blocks of code needed to generate the front end code you need for a modern app.\n\nDefine a component in `components/calendar/calendar.py` like this:\n\n```python\n@register(\"calendar\")\nclass Calendar(Component):\n template_file = \"template.html\"\n\n def get_context_data(self, date):\n return {\"date\": date}\n```\n\nWith this `template.html` file:\n\n```htmldjango\n<div class=\"calendar-component\">Today's date is <span>{{ date }}</span></div>\n```\n\nUse the component like this:\n\n```htmldjango\n{% component \"calendar\" date=\"2024-11-06\" %}{% endcomponent %}\n```\n\nAnd this is what gets rendered:\n\n```html\n<div class=\"calendar-component\">Today's date is <span>2024-11-06</span></div>\n```\n\n### <table><td>[Read the full documentation](https://django-components.github.io/django-components/latest/)</td></table>\n\n... or jump right into the code, [check out the example project](https://github.com/django-components/django-components/tree/master/sampleproject))\n\n## Release notes\n\nRead the [Release Notes](https://github.com/django-components/django-components/tree/master/CHANGELOG.md)\nto see the latest features and fixes.\n\n## Community examples\n\nOne 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.\n\n- [django-htmx-components](https://github.com/iwanalabs/django-htmx-components): A set of components for use with [htmx](https://htmx.org/). Try out the [live demo](https://dhc.iwanalabs.com/).\n\n- [djc-heroicons](https://pypi.org/project/djc-heroicons/): A component that renders icons from [Heroicons.com](https://heroicons.com/).\n\n## Contributing and development\n\nGet involved or sponsor this project - [See here](https://django-components.github.io/django-components/dev/overview/contributing/)\n\nRunning django-components locally for development - [See here](https://django-components.github.io/django-components/dev/overview/development/)\n",
"bugtrack_url": null,
"license": "MIT",
"summary": "A way to create simple reusable template components in Django.",
"version": "0.127",
"project_urls": {
"Changelog": "https://django-components.github.io/django-components/latest/release_notes/",
"Documentation": "https://django-components.github.io/django-components/",
"Donate": "https://github.com/sponsors/EmilStenstrom",
"Homepage": "https://github.com/django-components/django-components/",
"Issues": "https://github.com/django-components/django-components/issues"
},
"split_keywords": [
"django",
" components",
" css",
" js",
" html"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "198b40ff957325027f53328343dd592915852f86d2acb9bfda5c2207dcd689b6",
"md5": "9b38d0149fb4a84d807e05f49a064e06",
"sha256": "691cb4f90a0b3a325c0644507835acf71bd445a5bf84d4278db46a078d4b87fb"
},
"downloads": -1,
"filename": "django_components-0.127-py3-none-any.whl",
"has_sig": false,
"md5_digest": "9b38d0149fb4a84d807e05f49a064e06",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": "<4.0,>=3.8",
"size": 128741,
"upload_time": "2025-02-01T10:16:34",
"upload_time_iso_8601": "2025-02-01T10:16:34.664795Z",
"url": "https://files.pythonhosted.org/packages/19/8b/40ff957325027f53328343dd592915852f86d2acb9bfda5c2207dcd689b6/django_components-0.127-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "e90cbc35e4e87abf3e47d14670cf9c0687e1b9f12a94258a7237ba5d407e9c40",
"md5": "f7891774a3b2c2d899e9c3a17b853945",
"sha256": "809a71fdd664c291b5516f7a21b2512afb3723156367f0eb421f548937f4e2d6"
},
"downloads": -1,
"filename": "django_components-0.127.tar.gz",
"has_sig": false,
"md5_digest": "f7891774a3b2c2d899e9c3a17b853945",
"packagetype": "sdist",
"python_version": "source",
"requires_python": "<4.0,>=3.8",
"size": 115005,
"upload_time": "2025-02-01T10:16:37",
"upload_time_iso_8601": "2025-02-01T10:16:37.040350Z",
"url": "https://files.pythonhosted.org/packages/e9/0c/bc35e4e87abf3e47d14670cf9c0687e1b9f12a94258a7237ba5d407e9c40/django_components-0.127.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-02-01 10:16:37",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "sponsors",
"github_project": "EmilStenstrom",
"github_not_found": true,
"lcname": "django-components"
}
