https://github.com/tetra-framework/tetra
Tetra - A full stack component framework for Django using Alpine.js
https://github.com/tetra-framework/tetra
alpinejs django full-stack python
Last synced: 17 days ago
JSON representation
Tetra - A full stack component framework for Django using Alpine.js
- Host: GitHub
- URL: https://github.com/tetra-framework/tetra
- Owner: tetra-framework
- License: mit
- Created: 2022-05-01T16:39:31.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-03-17T22:28:16.000Z (28 days ago)
- Last Synced: 2025-03-20T12:06:04.417Z (25 days ago)
- Topics: alpinejs, django, full-stack, python
- Language: Python
- Homepage: https://www.tetraframework.com
- Size: 610 KB
- Stars: 579
- Watchers: 16
- Forks: 22
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-python-web-frameworks - Tetra - a full stack component framework for Django using Alpine.js (Front-end frameworks / More)
README
# 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. It also encapsulates your Python, HTML, JavaScript and CSS into one file for close proximity of related concerns.
See examples at [tetraframework.com](https://www.tetraframework.com)
Read the [Documentation](https://tetra.readthedocs.org)
```
pip install tetra
```
## What does Tetra do?
- 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 close 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 blocks
Components can have multiple {% block(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.
- 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.