examples

Learn from real apps

Small, complete apps from the pyxpo repository. Clone it, open a folder and run pyxpo run desktop.

Counter

The smallest app with two screens: a counter and a details page that reads the id from the URL.

useState
router
Link

examples/counter/app/index.py

from pyxpo import Button, Text, View, useState
from pyxpo.router import Link

def Index():
    n, setN = useState(0)
    return View(
        Text("Count: ", n),
        Button(title="Add", onPress=lambda: setN(n + 1)),
        Link("Details", href="/details/%d" % n),
    )

default = Index

Todo list

A text field and a growing list. Shows controlled inputs and keyed children.

TextInput
lists
keys

examples/todo on GitHub

examples/todo/app/index.py

from pyxpo import Button, Text, TextInput, View, useState

def Todo():
    items, setItems = useState([])
    draft, setDraft = useState("")

    def add():
        if draft:
            setItems(items + [draft])
            setDraft("")

    return View(
        TextInput(value=draft, onChangeText=setDraft, placeholder="New item"),
        Button(title="Add", onPress=add),
        *[Text(t, key="%d:%s" % (i, t)) for i, t in enumerate(items)],
        style={"flex": 1, "padding": 16},
    )

default = Todo

React Native style

The same ideas written the way a React Native developer would, with StyleSheet.create and camelCase props.

StyleSheet
@component
snake_case

examples/rn_style on GitHub

examples/rn_style/app/index.py

from pyxpo import Pressable, StyleSheet, Text, View, component, use_state

styles = StyleSheet.create(
    title=dict(fontSize=24, fontWeight="bold"),
    box=dict(padding=16, borderRadius=12, backgroundColor="#ffd43b"),
)

@component
def Counter():
    count, set_count = use_state(0)
    return View(
        Text("Hello from Python", style=styles.title),
        Pressable(Text(f"Tapped {count} times"),
                  on_press=lambda: set_count(count + 1), style=styles.box),
    )

Full app

ImageKit

A complete photo toolbox: pick images, resize and compress them, strip metadata, save to the gallery and share. It uses four native modules, a custom theme, icons and safe areas, and it builds into a release APK.

image-picker
image-manipulator
media-library
sharing

pyproject.toml

[tool.pyxpo]
name = "ImageKit"
modules = [
    "image-manipulator", "image-picker",
    "media-library", "sharing",
]