| Name | tetra JSON |
| Version |
0.4.0
JSON |
| download |
| home_page | None |
| Summary | Full stack component framework for Django using Alpine.js |
| upload_time | 2025-08-03 22:42:38 |
| maintainer | None |
| docs_url | None |
| author | None |
| requires_python | >=3.8 |
| license | None |
| keywords |
python
django
framework
components
|
| VCS |
 |
| bugtrack_url |
|
| requirements |
No requirements were recorded.
|
| Travis-CI |
No Travis.
|
| coveralls test coverage |
No coveralls.
|
# Tetra
Full stack component framework for [Django](http://djangoproject.com) using [Alpine.js](https://alpinejs.dev)
Tetra is a new full stack component framework for Django, bridging the gap between your server logic and front end presentation. It uses a public shared state and a resumable server state to enable inplace updates for components. It also encapsulates your Python, HTML, JavaScript and CSS into one file or directory for proximity of related concerns.
## Documentation
Too much for a README. There's a [Documentation](https://tetra.readthedocs.org) page.
There are also a shortcut to some [examples](https://www.tetraframework.com/examples/).
## Installation
As usual:
```
pip install tetra
```
But wait, this isn't all. Tetra needs some customization in your Django project.
Read more at [Installation docs](https:/www.tetraframework.com/installation.md)
## Short Overview
For the impatient: here's a short example video that shows what Tetra does:
https://github.com/user-attachments/assets/137c53af-1fc2-48c5-9c53-a007fbad7874
This is done using simple and concise code in one component, rendered in your template with just `{% InfoCard / %}. No page reload needed.
```python
from tetra import Component, public
class InfoCard(Component):
title: str = "I'm so excited!"
content: str = "We got some news for you."
name: str = public("")
@public
def close(self):
self.client._removeComponent()
@public
def done(self):
print("User clicked on OK, username:", self.name)
self.content = f"Hi { self.name }! No further news."
template = """
<div class="card text-white bg-secondary mb-3" style="max-width: 18rem;">
<div class="card-header d-flex justify-content-between">
<h3>Information</h3>
<button class="btn btn-sm btn-warning" @click="_removeComponent(
)"><i class="fa fa-x"></i></button>
</div>
<div class="card-body">
<h5 class="card-title">{{ title }}</h5>
<p class="card-text">
{{ content }}
</p>
<p x-show="!name">
Enter your name below!
</p>
<p x-show="name">
Thanks, {% livevar name %}
</p>
<div class="input-group mb-3">
<input
type="text"
class="form-control"
placeholder="Your name"
@keyup.enter="done()"
x-model="name">
</div>
<button
class="btn btn-primary"
@click="done()"
:disabled="name == ''">
Ok
</button>
</div>
</div>
"""
```
## What does Tetra do exactly?
Django on the backend, Alpine.js in the browser
: Tetra combines the power of Django with Alpine.js to make development easier and quicker.
Component encapsulation
: Each component combines its Python, HTML, CSS and JavaScript in one place for proximity of related code.
Resumable server state
: The components' full server state is saved between public method calls. This state is encrypted for security.
Public server methods
: Methods can be made public, allowing you to easily call them from JS on the front end, resuming the component's state.
Shared public state
: Attributes can be decorated to indicate they should be available in the browser as Alpine.js data objects.
Server "watcher" methods
: Public methods can be instructed to watch a public attribute, enabling reactive re-rendering on the server.
Inplace updating from the server
: Server methods can update the rendered component in place. Powered by the Alpine.js morph plugin.
Component library packaging
: Every component belongs to a "library"; their JS & CSS is packed together for quicker browser downloads.
Components with overridable slots
: Components can have multiple {% slot(s) %} which can be overridden when used.
JS/CSS builds using [esbuild](https://esbuild.github.io)
: Both for development (built into runserver) and production your JS & CSS is built with esbuild.
Automatic Js Source Maps
: Source maps are generated during development so that you can track down errors to the original Python files.
Syntax highlighting with type annotations
: Tetra uses type annotations to syntax highlight your JS, CSS & HTML in your Python files with a [VS Code plugin](https://github.com/samwillis/python-inline-source/tree/main/vscode-python-inline-source)
Forms
: `FormComponent`s can act as simple replacements for Django's FormView, but due to Tetra's dynamic nature, a field can e.g. change its value or disappear depending on other fields' values.
Raw data
{
"_id": null,
"home_page": null,
"name": "tetra",
"maintainer": null,
"docs_url": null,
"requires_python": ">=3.8",
"maintainer_email": null,
"keywords": "python, django, framework, components",
"author": null,
"author_email": "Sam Willis <sam.willis@gmail.com>, Christian Gonz\u00e1lez <christian.gonzalez@nerdocs.at>",
"download_url": "https://files.pythonhosted.org/packages/29/5d/fff03d2c5f5b6d1b9c5741cce026cdaca8f6763e92ab25a869a9d738e3d2/tetra-0.4.0.tar.gz",
"platform": null,
"description": "# Tetra\n\nFull stack component framework for [Django](http://djangoproject.com) using [Alpine.js](https://alpinejs.dev)\n\nTetra is a new full stack component framework for Django, bridging the gap between your server logic and front end presentation. It uses a public shared state and a resumable server state to enable inplace updates for components. It also encapsulates your Python, HTML, JavaScript and CSS into one file or directory for proximity of related concerns.\n\n\n## Documentation\n\nToo much for a README. There's a [Documentation](https://tetra.readthedocs.org) page. \n\nThere are also a shortcut to some [examples](https://www.tetraframework.com/examples/).\n\n## Installation\n\nAs usual:\n```\npip install tetra\n```\n\nBut wait, this isn't all. Tetra needs some customization in your Django project. \n\nRead more at [Installation docs](https:/www.tetraframework.com/installation.md)\n\n## Short Overview\n\nFor the impatient: here's a short example video that shows what Tetra does:\n\n\nhttps://github.com/user-attachments/assets/137c53af-1fc2-48c5-9c53-a007fbad7874\n\n\n\nThis is done using simple and concise code in one component, rendered in your template with just `{% InfoCard / %}. No page reload needed.\n\n```python\nfrom tetra import Component, public\n\nclass InfoCard(Component):\n title: str = \"I'm so excited!\"\n content: str = \"We got some news for you.\"\n name: str = public(\"\")\n\n @public\n def close(self):\n self.client._removeComponent()\n\n @public\n def done(self):\n print(\"User clicked on OK, username:\", self.name)\n self.content = f\"Hi { self.name }! No further news.\"\n\n template = \"\"\"\n <div class=\"card text-white bg-secondary mb-3\" style=\"max-width: 18rem;\">\n <div class=\"card-header d-flex justify-content-between\">\n <h3>Information</h3>\n <button class=\"btn btn-sm btn-warning\" @click=\"_removeComponent(\n )\"><i class=\"fa fa-x\"></i></button>\n </div>\n \n <div class=\"card-body\">\n <h5 class=\"card-title\">{{ title }}</h5>\n <p class=\"card-text\">\n {{ content }}\n </p>\n <p x-show=\"!name\">\n Enter your name below!\n </p>\n <p x-show=\"name\">\n Thanks, {% livevar name %}\n </p>\n <div class=\"input-group mb-3\">\n\n <input \n type=\"text\" \n class=\"form-control\" \n placeholder=\"Your name\" \n @keyup.enter=\"done()\"\n x-model=\"name\">\n </div>\n <button \n class=\"btn btn-primary\" \n @click=\"done()\" \n :disabled=\"name == ''\">\n Ok\n </button>\n </div>\n \n </div>\n \"\"\"\n```\n\n## What does Tetra do exactly?\n\nDjango on the backend, Alpine.js in the browser\n: Tetra combines the power of Django with Alpine.js to make development easier and quicker.\n\nComponent encapsulation\n: Each component combines its Python, HTML, CSS and JavaScript in one place for proximity of related code.\n\nResumable server state\n: The components' full server state is saved between public method calls. This state is encrypted for security.\n\nPublic server methods\n: Methods can be made public, allowing you to easily call them from JS on the front end, resuming the component's state.\n\nShared public state\n: Attributes can be decorated to indicate they should be available in the browser as Alpine.js data objects.\n\nServer \"watcher\" methods\n: Public methods can be instructed to watch a public attribute, enabling reactive re-rendering on the server.\n\nInplace updating from the server\n: Server methods can update the rendered component in place. Powered by the Alpine.js morph plugin.\n\nComponent library packaging\n: Every component belongs to a \"library\"; their JS & CSS is packed together for quicker browser downloads.\n\nComponents with overridable slots\n: Components can have multiple {% slot(s) %} which can be overridden when used.\n\nJS/CSS builds using [esbuild](https://esbuild.github.io)\n: Both for development (built into runserver) and production your JS & CSS is built with esbuild.\n\nAutomatic Js Source Maps\n: Source maps are generated during development so that you can track down errors to the original Python files.\n\nSyntax highlighting with type annotations\n: Tetra uses type annotations to syntax highlight your JS, CSS & HTML in your Python files with a [VS Code plugin](https://github.com/samwillis/python-inline-source/tree/main/vscode-python-inline-source)\n\nForms\n: `FormComponent`s can act as simple replacements for Django's FormView, but due to Tetra's dynamic nature, a field can e.g. change its value or disappear depending on other fields' values.\n",
"bugtrack_url": null,
"license": null,
"summary": "Full stack component framework for Django using Alpine.js",
"version": "0.4.0",
"project_urls": {
"Documentation": "https://tetra.readthedocs.io",
"Homepage": "https://tetraframework.com",
"Repository": "https://github.com/tetra-framework/tetra"
},
"split_keywords": [
"python",
" django",
" framework",
" components"
],
"urls": [
{
"comment_text": null,
"digests": {
"blake2b_256": "56a012667ca4aae6fda27087487653053f0498a18cf28c216e6f120a3d237fd0",
"md5": "6666374eb0148e7a2c475d80e27b86d1",
"sha256": "616d057904e3a2881f8b6f970954dc8ab0392da6f5aefe9eb2211924b696cc22"
},
"downloads": -1,
"filename": "tetra-0.4.0-py3-none-any.whl",
"has_sig": false,
"md5_digest": "6666374eb0148e7a2c475d80e27b86d1",
"packagetype": "bdist_wheel",
"python_version": "py3",
"requires_python": ">=3.8",
"size": 150586,
"upload_time": "2025-08-03T22:42:36",
"upload_time_iso_8601": "2025-08-03T22:42:36.943934Z",
"url": "https://files.pythonhosted.org/packages/56/a0/12667ca4aae6fda27087487653053f0498a18cf28c216e6f120a3d237fd0/tetra-0.4.0-py3-none-any.whl",
"yanked": false,
"yanked_reason": null
},
{
"comment_text": null,
"digests": {
"blake2b_256": "295dfff03d2c5f5b6d1b9c5741cce026cdaca8f6763e92ab25a869a9d738e3d2",
"md5": "0546596fc55782307ac5aa6a2c0e12c4",
"sha256": "2eae40ceee436d0fbcff5255b12a64e0cb038d84d4c42cc4a7e656863df56229"
},
"downloads": -1,
"filename": "tetra-0.4.0.tar.gz",
"has_sig": false,
"md5_digest": "0546596fc55782307ac5aa6a2c0e12c4",
"packagetype": "sdist",
"python_version": "source",
"requires_python": ">=3.8",
"size": 176315,
"upload_time": "2025-08-03T22:42:38",
"upload_time_iso_8601": "2025-08-03T22:42:38.328684Z",
"url": "https://files.pythonhosted.org/packages/29/5d/fff03d2c5f5b6d1b9c5741cce026cdaca8f6763e92ab25a869a9d738e3d2/tetra-0.4.0.tar.gz",
"yanked": false,
"yanked_reason": null
}
],
"upload_time": "2025-08-03 22:42:38",
"github": true,
"gitlab": false,
"bitbucket": false,
"codeberg": false,
"github_user": "tetra-framework",
"github_project": "tetra",
"travis_ci": false,
"coveralls": false,
"github_actions": true,
"lcname": "tetra"
}
