Pyxle Demos

Three demo apps built with Pyxle — a Python-first full-stack web framework where server logic and React UI live in the same .pyxl file.

Each app is a few hundred lines of code. Each is live and interactive.

The Demos

Flux — SaaS Analytics Dashboard

Live: flux.pyxle.app

A dark-themed analytics dashboard with MRR charts, customer CRUD, revenue forecasting, and a settings panel. Server-rendered from SQLite with data aggregation in Python.

Pyxle features shown: @server loaders, @action mutations, dynamic [id] routing, layout loaders (layoutData), usePathname() for active nav state.

---

Chroma — Color Palette Generator

Live: chroma.pyxle.app

A light-themed color tool with 18 curated palettes, interactive palette creation, and WCAG accessibility analysis. Color harmony algorithms (analogous, complementary, triadic, split-complementary, monochromatic) run server-side using Python's colorsys standard library.

Pyxle features shown: @action for server-side color computation, @server loaders, dynamic [id] routing, file-based routing, client-side filtering.

---

Glyph — Generative Geometric Art

Live: glyph.pyxle.app

A dark gallery of spirographs, rose curves, mandalas, star polygons, Lissajous curves, and wave patterns. Every SVG point is computed server-side with math.sin and math.cos, then rendered in React.

Pyxle features shown: @action for server-side geometry computation, pre-computed gallery via @server, parameter validation with ActionError, dynamic [id] routing.

---

Run Locally

Each demo is a standalone Pyxle app. Pick one and run:

# Install Pyxle
pip install pyxle-framework

# Pick a demo
cd flux    # or: cd chroma / cd glyph

# Install dependencies and start
npm install
pyxle dev

Open http://localhost:8000.

Requirements

• Python 3.10+
• Node.js 18+
• npm

What is Pyxle?

Pyxle lets you write Python server logic and React UI in a single .pyxl file:

# pages/index.pyxl

@server
async def load(request):
    # This runs on the server (Python)
    return {"message": "Hello from Python"}

# --- React UI below ---

import React from 'react';

export default function Page({ data }) {
    return <h1>{data.message}</h1>;
}

• Website: pyxle.dev
• Framework: github.com/pyxle-framework/pyxle
• Docs: pyxle.dev/docs

License

MIT