"No JavaScript, no HTML mess, just Zen Mode"
The Pure Python Full-Stack Web Framework
PyX adalah framework full-stack yang memungkinkan Anda membangun aplikasi web 100% dengan Python - tanpa JavaScript, tanpa HTML templates, tanpa context switching.
| Category | Features |
|---|---|
| ๐ 100% Python | UI, Backend, Database - semua Python |
| โก High Performance | Granian server (Rust-powered) |
| ๐ง Zen Mode | Semua via ui.*, db.* namespace |
| ๐จ 100+ Components | Premium UI components |
| ๐ก Real-time | WebSocket Rooms & Presence |
| ๐๏ธ Database ORM | Relationships, Migrations, N+1 solution |
| ๐ Auth Built-in | Login, Register, Roles, Security Headers |
| ๐ค AI Ready | Built-in OpenAI/Claude/Gemini integration |
| โ๏ธ Cloud Native | Unified Storage (S3/GCS/Local) |
| ๐ Batteries | Email, Jobs, i18n, PWA, SEO, OpenAPI |
# From PyPI
pip install usepyx
# From source
pip install git+https://github.com/sukirman1901/usePyX.git
# For development
git clone https://github.com/sukirman1901/usePyX.git
cd usePyX
pip install -e .# Create project
pyx init myapp
cd myapp
# Run
pyx runOpen http://localhost:8000 ๐
Satu import untuk semuanya:
from pyx import ui, State, var, redirect, Model, Field
# โก State Management
class CounterState(State):
count: int = 0
@var # Computed var - auto-recalculates!
def double(self) -> int:
return self.count * 2
def increment(self):
self.count += 1
def reset(self):
self.count = 0
return redirect("/") # Server-driven navigation!
# ๐จ UI with State binding
def counter_page():
return ui.div(
ui.h1(f"Count: {CounterState.count}"),
ui.p(f"Double: {CounterState.double}"),
ui.button("Add").on_click(CounterState.increment),
ui.button("Reset").on_click(CounterState.reset),
).p(8)
# ๐๏ธ Database
class User(Model, table=True):
id: int = Field(primary_key=True)
name: str
email: str = Field(unique=True)# Pythonic styling (tidak perlu Tailwind strings)
ui.div("Hello").style(
bg="blue-500",
color="white",
p=4,
rounded="xl",
shadow="lg"
)
# Presets
ui.button("Submit").apply(ui.preset("button_primary"))# Navigation
ui.navbar(brand=..., items=[...])
ui.sidebar(items=[...])
ui.breadcrumb([...])
# Layout
ui.container(...)
ui.hero(title="...", subtitle="...")
ui.section(title="...", children=...)
ui.footer(...)
# Interaction
ui.modal(trigger=..., content=...)
ui.tabs([...])
ui.accordion([...])
# Data
ui.datagrid(data)
ui.chart(data, type="line")
# Forms
ui.input(placeholder="...")
ui.select(options=[...])
ui.file_upload(accept="image/*")from pyx import db
from typing import List, Optional
class User(db.Model, table=True):
id: Optional[int] = db.Column(primary_key=True)
name: str
posts: List["Post"] = db.Relationship(back_populates="author")
class Post(db.Model, table=True):
id: Optional[int] = db.Column(primary_key=True)
title: str
author_id: int = db.Column(foreign_key="user.id")
author: User = db.Relationship(back_populates="posts")
db.init()# CRUD
user = User(name="John")
db.save(user)
db.delete(user)
# Find
users = db.find_all(User)
user = db.get(User, 1)
user = db.filter(User, active=True)
# Eager loading (N+1 solution)
users = db.with_relations(User, "posts")
# Query builder
users = (
db.query(User)
.where(active=True)
.order_by("name")
.limit(10)
.all()
)pyx generate migration add_users_table
pyx migrate up
pyx migrate downfrom pyx.contrib.auth import User, AuthState
# User model with password hashing
user = User(email="admin@pyx.dev", username="admin")
user.set_password("secret123")
# Verify password
if user.check_password("secret123"):
print("Login successful!")
# AuthState for login/logout flow
class MyAuth(AuthState):
def login(self):
# Built-in validation & redirect
return super().login()
# UI with auth binding
ui.input(placeholder="Email").on_change(MyAuth.set_email)
ui.input(type="password").on_change(MyAuth.set_password)
ui.button("Login").on_click(MyAuth.login)PyX is "Secure by Default" with built-in protection against common vulnerabilities.
| Feature | Description |
|---|---|
| ๐ Bcrypt Hashing | Auto-salted password hashing |
| ๐ฆ Rate Limiting | IP-based request throttling |
| ๐ก๏ธ CSRF & XSS | Built-in protection & sanitization |
| ๐ Security Headers | OWASP-recommended headers (HSTS, CSP) |
| ๐ซ Brute-force | Account lockout mechanism |
| ๐ SQL Injection | Prevented via parameterized queries |
pyx init myapp # Create new project
pyx run # Run development server
pyx build # Build for production (SSG)
pyx test # Run testspyx db init # Initialize Alembic migrations
pyx db makemigrations # Generate migration from model changes
pyx db migrate # Apply pending migrations
pyx db rollback # Rollback last migration
pyx db history # Show migration history
pyx db current # Show current revision# Generate model
pyx g model User name:str email:str
# Generate page
pyx g page dashboard
# Generate component
pyx g component UserCard
# Generate API (with CRUD)
pyx g api users --crud
# Generate test
pyx g test users
# Generate migration
pyx g migration add_posts_tablefrom pyx import event
@event("message")
def on_message(data, client):
broadcast({
"type": "new_message",
"text": data["text"]
})# NEW! State Management
from pyx import State, var, redirect, alert, toast
class AppState(State):
count: int = 0
@var
def doubled(self) -> int:
return self.count * 2
def increment(self):
self.count += 1
return toast("Incremented!", "success")
# NEW! Background Tasks
from pyx import background, delayed, periodic
@background
async def send_email(user_id):
# Runs without blocking UI
await email.send(...)
@periodic(60)
def check_notifications():
# Runs every 60 seconds
...
# Database (NEW API)
from pyx import Model, Field, session, Query, select
class User(Model, table=True):
id: int = Field(primary_key=True)
email: str = Field(unique=True)
with session() as db:
users = db.exec(select(User)).all()
# Session Management
from pyx import Session
session = Session()
session['user_id'] = 123
session.save()
# Auth Module
from pyx.contrib.auth import User, AuthState
# UI (Frontend)
from pyx import ui
ui.button("Click").on_click(AppState.increment)
ui.input().on_change(AppState.set_count) # Auto-setter!
# Cloud Storage
from pyx import storage
url = storage.upload(file, folder="uploads")
# WebSocket Rooms
ws.join("chat:1", client)
ws.broadcast("chat:1", {"msg": "Hello"})
users = ws.presence("chat:1")
# AI Integration
response = await ai.chat("Summarize this", system="You are helpful")
embedding = await ai.embed("Search query")
# API Docs
docs.configure(app, title="My API", version="2.0")PyX automatically handles navigation like a Single Page Application (SPA), updating only the content that changes without full page reloads.
# Automatic SPA Link
ui.link_button("Go to Dashboard", "/dashboard")
# Manual Client-Side Navigation
ui.button("Home").on_click(JS.navigate("/"))Use JS helpers for instant UI updates without server roundtrips.
from pyx.client import JS
# Toggle Class
ui.button("Menu").on_click(JS.toggle_class("#sidebar", "hidden"))
# Copy to Clipboard
ui.button("Share").on_click(
JS.copy_to_clipboard("https://myapp.com").then_toast("Link copied!")
)Strictly typed SEO metadata generator.
from pyx.seo import Metadata, JSONLD
def product_meta(params):
return Metadata(
title=f"Product {params.get('id')}",
json_ld=JSONLD.product(name="iPhone", price="999")
)
app.add_page("/product/{id}", render_page, metadata=product_meta)Design in Figma, Code in Python.
Instantly convert your Figma designs into clean, production-ready PyX code with our official plugin.
- Auto-Code Generation: Select any Frame or Group -> Get
ui.div,ui.text,ui.buttoncode. - Smart Detection: automatically recognizes:
- ๐ Charts: (
Bar,Line,Piedetected by name) - ๐ผ๏ธ Icons: (
Lucideicons detected) - ๐ Components: (Buttons, Inputs, Badges)
- ๐ Charts: (
- Zen Mode Ready: Generates Pythonic styling (e.g.
.bg("red").p(4)). - Responsive Layouts: Converts Auto-Layout to Flexbox automatically.
myapp/
โโโ main.py # Entry point
โโโ pages/ # File-based routing
โ โโโ index.py # โ /
โ โโโ about.py # โ /about
โ โโโ blog/
โ โโโ [slug].py # โ /blog/:slug
โโโ models/ # Database models
โโโ components/ # Reusable UI
โโโ api/ # API endpoints
โโโ tests/ # Tests
โโโ migrations/ # Database migrations
| Feature | Flask/Django | Next.js | PyX |
|---|---|---|---|
| Backend Python | โ | โ | โ |
| Frontend Python | โ | โ | โ |
| UI Components | โ | โ | โ |
| Database ORM | โ | โ | โ |
| Auth Built-in | โ | โ | โ |
| Real-time | โ | โ | |
| Single Language | โ | โ | โ |
| File | Description |
|---|---|
| SYNTAX_GUIDE.md | UI syntax reference |
| SYNTAX_GUIDE.md | UI syntax reference |
- Core UI Engine (Zen Mode)
- 100+ UI Components
- Pythonic Styling
- Database ORM with Relationships
- Migrations CLI (
pyx db *) - Authentication Module
- CLI Generators
- Testing Framework
- Logging
- Caching
- i18n / PWA / SEO
- Cloud Storage (S3/GCS)
- WebSocket Rooms & Presence
- AI/LLM Integration
- OpenAPI/Swagger Docs
- State Management โจ NEW
- Computed Vars (
@vardecorator) โจ NEW - Session Persistence โจ NEW
- Background Tasks โจ NEW
- Docker Deployment
- Cloud Templates (Vercel, Railway)
"Write less, do more. Python only."
PyX mengikuti filosofi bahwa developer productivity lebih penting dari ceremonial code. Semua bisa diakses via namespace sederhana - tidak perlu banyak import, tidak perlu context switching.
We love contributions! Please read our CONTRIBUTING.md guide to get started.
# Quick setup for contributors
git clone https://github.com/sukirman1901/usePyX.git
cd usePyX
pip install -e .
pyx testBuilt with โค๏ธ by PyX Team
