Reactive user interfaces
Project description
Collagraph 📓
Reactive user interfaces.
The word Collagraphy is derived from the Greek word koll or kolla, meaning glue, and graph, meaning the activity of drawing.
Inspired by Vue and React.
Features
Write your Python interfaces in a declarative manner with plain render functions, component classes or even single-file components using Vue-like syntax, but with Python!
- Reactivity (made possible by leveraging observ)
- Function components
- Class components with local state and life-cycle methods/hooks
- Single-file components with Vue-like syntax (
.cgx
files) - Custom renderers
Here is an example that shows a simple counter, made with a function component:
from PySide6 import QtWidgets
from observ import reactive
import collagraph as cg
# Declare some reactive state
state = reactive({"count": 0})
# Define function that adjusts the state
def bump():
state["count"] += 1
# Declare how the state should be rendered
def Counter(props):
return cg.h(
"widget",
{},
cg.h("label", {"text": f"Count: {props['count']}"}),
cg.h("button", {"text": "Bump", "on_clicked": bump}),
)
# Create a Collagraph instance with a PySide renderer
# and register with the Qt event loop
gui = cg.Collagraph(
renderer=cg.PySideRenderer(),
event_loop_type=cg.EventLoopType.QT,
)
# Render the function component into a container
# (in this case the app but can be another widget)
app = QtWidgets.QApplication()
gui.render(cg.h(Counter, state), app)
app.exec()
For more examples, please take a look at the examples folder.
Currently there are two renderers:
- PysideRenderer: for rendering PySide6 applications
- PygfxRenderer: for rendering 3D graphic scenes with Pygfx
It is possible to create a custom Renderer using the Renderer interface, to render to other UI frameworks, for instance wxPython, or even the browser DOM.
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Hashes for collagraph-0.4.1-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | a99b2a27283f4936d12493e2e8e81832437b8a9536f0c29719a622a5217e6c45 |
|
MD5 | a924eadc811c09ef3e4a54370d3abed6 |
|
BLAKE2b-256 | 4dce43e97036d886c2dcfef26ca8bc809a8c94459dc50b1e1830e1c1c3a95a87 |