get started

Editor setup

The pyxpo extension for VS Code completes style keys, props and imports, shows colors and checks your styles as you type. It works next to the Python extension (Pylance).

Install in VS Code View on Marketplace

from pyxpo import StyleSheet, Text, View

styles = StyleSheet.create(
    card=dict(
        backgroundColor="#3776ab",
        borderRadius=12,
        al
▢alignItemsflex-start | center | flex-end | stretch | baseline▢alignSelf▢alignContent    ),
)

pyxpoPython 3.13

Install

Open the Extensions view (Cmd+Shift+X on macOS, Ctrl+Shift+X elsewhere), search for pyxpo and select Install. Or run:

$code --install-extension pyxpo.pyxpo

For Python completion and type checks, also install the Python extension. pyxpo adds what Pylance cannot know: style keys, component props, colors and the [tool.pyxpo] config. Features turn on in Python files that import pyxpo and in any Python file of a pyxpo project.

In Python files

Style completion in StyleSheet.create(...), style={...}, style=[...] and any *Style argument, with values for keys like justifyContent, alignItems and fontWeight.
Prop completion inside component calls such as View(, Pressable( and FlatList(.
Auto-import. Type View, useState or any other pyxpo name and pick it. The name is added to from pyxpo import ..., sorted like isort and Ruff.
Quick fixes. Cmd+. on a name that is not imported offers Import 'X' from pyxpo, and typos in style keys get a fix.
Colors. Swatches and the color picker for hex, rgb(), rgba() and named colors. The picker keeps the form you wrote.
Checks for unknown style keys, keys pyxpo does not support yet, wrong values and bad colors.
Hovers with the docs of each style key and component.

app/index.py

from pyxpo import StyleSheet, Text, View   # added for you as you type

styles = StyleSheet.create(
    card=dict(
        backgroundColor="#3776ab",       # swatch + color picker
        alignItems="center",             # values completed
        borderRaduis=12,                 # unknown key, quick fix: borderRadius
    ),
)

Snippets

pxscreen, pxcomponent, pxstate, pxeffect, pxstyles, pxview, pxtext, pxpress, pxlist, pxgradient. Type pxscreen in an empty file to get a complete screen.

In pyproject.toml

Keys, sub-tables and values of [tool.pyxpo] are completed and documented on hover, from the same schema as pyxpo config --schema. When you open or save the file, the extension runs pyxpo config and shows its errors on the matching lines.

Commands

In a pyxpo project, the pyxpo item in the status bar opens a menu. All commands are also in the Command Palette. They run in a pyxpo terminal, in the folder whose pyproject.toml has [tool.pyxpo].

Command	Does
pyxpo: Run App...	A menu of the run commands below.
pyxpo: Run on Android / iOS / Desktop	pyxpo run android, ios or desktop.
pyxpo: Prebuild Native Projects	pyxpo prebuild.
pyxpo: Doctor (Check Toolchains)	pyxpo doctor.
pyxpo: Show Resolved App Config	pyxpo config.
pyxpo: Create New Project...	pyxpo create <name> in a folder you pick.
pyxpo: Add Missing pyxpo Imports	Adds from pyxpo import ... for every pyxpo name the file uses.
pyxpo: Convert Style Keys to camelCase / snake_case	Rewrites the style keys of the current file.

Settings

Setting	Default	Meaning
`pyxpo.pythonPath`	`""`	Python used to run pyxpo. Empty: the Python extension's interpreter, then .venv or venv, then python3.
`pyxpo.styleNaming`	`auto`	auto, camelCase or snake_case for completed style keys and props. auto follows the file.
`pyxpo.autoImport`	`true`	Suggest pyxpo names while you type and add their import.
`pyxpo.diagnostics.enable`	`true`	Warn about unknown style keys, bad values and bad colors.
`pyxpo.validateConfig`	`true`	Check [tool.pyxpo] when pyproject.toml is opened or saved.
`pyxpo.colorDecorators`	`true`	Color swatches and the color picker.

Restricted Mode

In a folder you have not trusted, completion, auto-import, hovers, colors and style checks still work. Config validation and the run commands start your project's Python, so they wait until you trust the folder (Command Palette: Manage Workspace Trust).

Other editors

Any editor with a TOML language server can complete [tool.pyxpo] from the JSON Schema that pyxpo config --schema prints. pyxpo code is plain Python, so Pyright, Ruff and Black work on it as they are.