Tetra
Full stack component framework for Django using Alpine.js
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 page.
There is also a shortcut to some examples.
Installation
As usual:
uv pip install tetra
But wait, this isn't all. Tetra needs some customization in your Django project.
Read more at Installation docs
Short Overview
For the impatient: here's a short example video that shows what Tetra is capable of:
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.
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 : 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
Forms
: FormComponents 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.
1 maintainer
Metadata
1 maintainer
Release files for tetra 0.9.2
For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the package formats documentation.
Source distribution (sdist)
| File | Size | Uploaded | Provenance | |
|---|---|---|---|---|
| tetra-0.9.2.tar.gz | 231.7 kB | Without provenance | Details |
Built distribution (wheel)
| File | Interpreter | ABI | Platform | Reset |
|---|---|---|---|---|
| tetra-0.9.2-py3-none-any.whl | Python 3 | none | any | Details |
Total release size: 486.4 kB
Release files / tetra-0.9.2.tar.gz
| Download URL | tetra-0.9.2.tar.gz |
|---|---|
| Size | 231.7 kB |
| Tags | Source |
|
SHA-256 checksum How to use checksums |
b9a4a95dcb5159ec15339a87a4034125411a6b52a59ec50fb17878d2225359ab
|
|
BLAKE2b-256 checksum How to use checksums |
337b2af3d722e3effb1331b59d67985799caacfa6d1dd8f118a91ef1261f43c2
|
| Upload date | |
|
Uploaded using Trusted Publishing? What is trusted publishing? |
No |
| Uploaded via |
uv/0.9.17 {"installer":{"name":"uv","version":"0.9.17","subcommand":["publish"]},"python":null,"implementation":{"name":null,"version":null},"distro":{"name":"KDE neon","version":"24.04","id":"noble","libc":null},"system":{"name":null,"release":null},"cpu":null,"openssl_version":null,"setuptools_version":null,"rustc_version":null,"ci":null}
|
Release files / tetra-0.9.2-py3-none-any.whl
| Download URL | tetra-0.9.2-py3-none-any.whl |
|---|---|
| Size | 254.7 kB |
| Tags | Python 3 |
|
SHA-256 checksum How to use checksums |
b21d745bda8b55bc6831ee564efc3b261150196ec978ad7f0b9e530f6fae7ca2
|
|
BLAKE2b-256 checksum How to use checksums |
f60219d70abe47e1ca4c3e8aeacdb1adac3019678a8e6de5374668006dbcb4e8
|
| Upload date | |
|
Uploaded using Trusted Publishing? What is trusted publishing? |
No |
| Uploaded via |
uv/0.9.17 {"installer":{"name":"uv","version":"0.9.17","subcommand":["publish"]},"python":null,"implementation":{"name":null,"version":null},"distro":{"name":"KDE neon","version":"24.04","id":"noble","libc":null},"system":{"name":null,"release":null},"cpu":null,"openssl_version":null,"setuptools_version":null,"rustc_version":null,"ci":null}
|
Security for tetra 0.9.2
Provenance
Provenance describes where a file came from. On PyPI, provenance is shared via attestations, which provide a verifiable record of the build or publishing details. View details, limitations and caveats.
No provenance found
None of the files in this release were uploaded with provenance metadata.
A note on package security
PyPI is a repository for distributing packages, not a service for auditing them. While third-party security researchers and our staff do their best to detect and remove malicious packages, PyPI cannot guarantee the quality, security or suitability of any given package.
