Fast and Simple GUI framework for Python
Render Python computed values and interact them via HTML in a webview application
Good for fast visualization or lightweight applications
| The application | The backend | The frontend |
|---|---|---|
 |
 |
 |
pip install pype-frameworkfrom Pype import pypeGenerates the project with all needed files.
Project-Name
├── frontend - HTML, CSS, Pype frontend library.
│ └── assets - Any asset file.
└── app.py
plumber new project-nameGenerates an .exe executable file from the given project.
The project should follow the generated structure.
Call from the projects directory.
plumber buildUpgrade the frontend API in a given project, to stay up to date with the backend API.
plumber upgradeDescription:
Exposes a function to the frontend side to be called
Example:
app.expose(functionFromPython)Description:
Calls an exposed function from the frontend.
Attributes can be left empty.
Example:
onclick="call('functionFromPython')"
onclick="call('functionFromPython', [attrib-1, attrib-2])"Applies and finalizes state changes by triggering observers and hooks. Updates are batched for efficiency, ensuring cleaner and more controlled state management. It offers on-demand state updates, reducing unnecessary processing.
Python:
app.state["numbers"].append(value)
app.push(["numbers","some other key","...another"]) #finalizes state changeJavaScript:
onclick="state['count']++; push(['count'])"Gets a state values deep copied value, for other usage then just immidietly setting state.
Python:
app.pull("count")JavaScript:
onclick="alert(pull('count'))"Description:
Binds a state to an element via its key attribute and specifies which attribute should be updated upon a state change.
Example:
app.bind('state-key', 'element-key', HTMLAttributes.INNERHTML)Description:
Attaches a function to a specific state change. When the state updates, the hooked function is called.
Example:
app.hook('state-key', hooked_function)Description:
Users can create prefabs that can be instantiated or destroyed by the app. Attributes are passed as Python dictionaries.
Example (HTML):
<prefab id="prefab-name">
<div class="number" style="color: $attribute-name-2; border-color: $attribute-name-2;">$attribute-name</div>
</prefab>Description:
Instantiates a prefab with a unique key under a specified parent element, passing attributes to customize its content.
Example:
app.instantiate("prefab-name", f"key-prefix-{count}", "prefab-parent-id", {"attribute1": 'something', "attribute2": 0})Description:
Destroys a prefab with the specified ID and key. During destruction, the prefab enters its destruction phase and receives the .destroyed class for exit animations.
Example:
app.destroy("prefab-name", f"key-prefix-{prevCount}")Description:
Observes a state array that contains attributes for prefabs, upon its change automatically instantiates or destroys prefabs.
Example:
app.observe('state-key','prefab-id','key-prefix','prefab-parent-id')Description:
Loads a given page exposed to the run function. .unloaded class for the current page for exit animations.
Example:
app.run([updatingFunc],["index.html","new-page.html"]) #Expose pages to app
app.load_page(1)Description:
All pages has a .window-handle div at top. This area is customizable too for making it fit with your app.