Build native Python interfaces using PSX Markup, CSS-like styling, reusable components, and a unified cross-platform rendering system.
PSX is the UI foundation of Velto. It provides a unified interface authoring language with familiar HTML-like syntax, reactive components, and native widget integration, rendering actual native widgets through Qt, Tkinter, and Kivy.
No browser. No embedded web engine. Native interfaces powered by Python.
Project status: PSX is currently in alpha development. Features and APIs may change as the project evolves.
Python already has excellent native UI frameworks. PSX doesn't replace them—it provides a common interface-building layer on top of their rendering capabilities.
- PSX Markup — Define interfaces using elements, attributes, expressions, conditionals, loops, and reusable components.
- Native rendering — Render actual widgets using PySide6, PyQt6, PyQt5, PySide2, Tkinter, or Kivy where supported.
- CSS-like styling — Apply styles using selectors, classes, inheritance, and a supported subset of CSS properties.
- Unified layout — Use Cinnamon, PSX's integrated layout engine, for consistent geometry calculations.
- Reactive components — Manage local state, effects, and references through hooks.
- Efficient updates — Reconcile virtual nodes, preserve compatible widget identities, and update affected interface regions.
- Native interoperability — Integrate framework-specific widgets and third-party libraries.
- Extensible architecture — Register components, native adapters, and plugins.
- Python 3.10–3.13
- A supported native UI toolkit
- Windows, macOS, or Linux, subject to backend compatibility
Install PSX from a local checkout with your preferred backend:
git clone https://github.com/Neuri-AI/PSX.git
cd PSX
# PySide6
python -m pip install -e ".[pyside6]"Other available backend extras include pyqt6, pyqt5, pyside2, and kivy.
PySide2 has additional Python version restrictions, and Tkinter is normally provided by the Python installation.
See the compatibility documentation for supported combinations.
PSX interfaces are defined using PSX Markup:
from psx import psx
view = psx("""
<div>
<h1>Hello, World!</h1>
<p>Welcome to PSX.</p>
<button>Get started</button>
</div>
""")The markup is compiled into a tree of virtual nodes (VNodes), which PSX reconciles and sends to a native renderer.
This snippet illustrates markup construction. A complete application also requires an application lifecycle and a compatible renderer.
PSX components can use hooks to manage state and update their interfaces.
from psx import component, psx, use_state
@component
def Counter():
count, set_count = use_state(0)
def increment():
set_count(lambda current: current + 1)
return psx("""
<div>
<h2>Counter</h2>
<p>Count: {count}</p>
<button on_click={increment}>
Increment
</button>
</div>
""")When state changes, PSX reconciles the updated interface instead of recreating the entire native widget tree.
PSX resolves references to local variables and callbacks through its lexical source transformation system.
PSX Markup is the interface authoring language of PSX.
All interfaces are defined through PSX Markup, which provides a unified syntax for HTML-like elements, built-in components, native widgets, and custom components.
It supports expressions, conditional rendering, iterations, component composition, and reactive state integration.
HTML-like elements provide familiar syntax for building native interfaces.
from psx import psx
view = psx("""
<div class="profile">
<h2>Profile</h2>
<p>Manage your account.</p>
<input placeholder="Your name" />
<button>Save changes</button>
</div>
""")These elements participate in PSX's component, styling, layout, reconciliation, and native rendering systems.
PSX provides built-in components such as Flex, Grid, GridItem, Scroll, and Native for organizing layouts, managing scrollable content, and integrating native widgets.
These components are used directly within PSX Markup:
from psx import psx
view = psx("""
<Flex direction="column" gap="16">
<h2>Dashboard</h2>
<Grid columns="2" gap="12">
<GridItem>
<p>Overview</p>
</GridItem>
<GridItem>
<p>Statistics</p>
</GridItem>
</Grid>
</Flex>
""")Built-in components and HTML-like elements are part of the same markup system, sharing PSX's reconciliation, styling, layout, and native rendering infrastructure.
The Native component enables the integration of toolkit-specific widgets and third-party libraries directly into PSX Markup.
For example, a PyQtGraph chart can be embedded in a Qt-based interface:
import numpy as np
import pyqtgraph as pg
from psx import psx
class SineChart(pg.PlotWidget):
def __init__(self):
super().__init__()
x = np.linspace(0, 10, 1000)
self.setBackground("#151515")
self.setTitle("Sine Wave")
self.showGrid(x=True, y=True)
self.plot(
x,
np.sin(x),
pen=pg.mkPen("#8B5CF6", width=2),
)
view = psx("""
<Flex direction="column" gap="16">
<h2>Signal Visualization</h2>
<Native widget={SineChart} />
</Flex>
""")The example illustrates third-party widget integration using the Qt backend. The exact Native widget-binding attribute should be checked against the installed PSX version.
Native widgets retain their toolkit-specific functionality and compatibility requirements.
PSX includes a CSS-like styling system connected to its universal box model and Cinnamon layout engine.
Its supported styling capabilities include:
- Stylesheets, selectors, classes, IDs, specificity, cascade, and inheritance.
- Dimensions, spacing, borders, and supported sizing constraints.
- Foreground colors, semantic backgrounds, and native typography.
- Supported Flex, Grid, Block, and Inline layout behavior.
- Incremental layout and measurement invalidation.
Native visual support varies by property, component, and renderer.
PSX does not claim complete browser CSS compatibility.
PSX Markup
|
v
Markup Compiler
|
v
Virtual Nodes
|
v
Reconciler
|
+---------+---------+
| |
v v
CSS & Styles Hooks & State
| |
+---------+---------+
|
v
Cinnamon Layout
|
v
Native Renderers
|
+-----------+-----------+
| | |
v v v
Qt Tkinter Kivy
PSX manages the interface representation, reconciliation, supported style resolution, and layout coordination.
Native renderers translate the resulting operations into real toolkit widgets, while Cinnamon remains the shared layout authority for the geometry it manages.
The diagram is a conceptual overview; actual rendering and update operations interact through the reconciler and renderer lifecycle.
Contributions to PSX are welcome.
-
Fork the repository on GitHub.
-
Create a feature branch:
git checkout -b feature/amazing-feature
-
Run the test suite:
poetry run pytest
-
Commit your changes:
git commit -m "feat: add amazing feature" -
Push your branch:
git push origin feature/amazing-feature
-
Open a pull request.
PSX is released under the MIT License.
See LICENSE for details.
For the new explicit props mapping, use update_props(props, changed) on your
widget or register @native_adapter. See Native reactive props.