or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

advanced-features.mdcore-framework.mddatabase-models.mdevent-system.mdindex.mdstyling-theming.mdui-components.md
tile.json

tessl/pypi-reflex

Web apps in pure Python with reactive components and automatic frontend generation.

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
pypipkg:pypi/reflex@0.8.x

To install, run

npx @tessl/cli install tessl/pypi-reflex@0.8.0

index.mddocs/

Reflex

Web apps in pure Python with reactive components and automatic frontend generation. Reflex enables building full-stack web applications entirely in Python, compiling to React components with automatic state synchronization between frontend and backend.

Package Information

  • Package Name: reflex
  • Language: Python
  • Installation: pip install reflex

Core Imports

import reflex as rx

Common state and component patterns:

from reflex import State, Component, Var

Basic Usage

import reflex as rx

# Define application state
class State(rx.State):
    count: int = 0
    
    def increment(self):
        self.count += 1
    
    def decrement(self):
        self.count -= 1

# Create a page component
def index():
    return rx.center(
        rx.vstack(
            rx.heading("Counter App", size="lg"),
            rx.heading(State.count, size="md"),
            rx.hstack(
                rx.button("Decrement", on_click=State.decrement),
                rx.button("Increment", on_click=State.increment),
            ),
            spacing="4",
        ),
        height="100vh",
    )

# Create and configure the app
app = rx.App()
app.add_page(index)

if __name__ == "__main__":
    app.compile()

Architecture

Reflex follows a reactive architecture with clear separation of concerns:

  • App: Top-level application container managing pages, routing, and configuration
  • State: Reactive state management with automatic frontend synchronization
  • Components: Declarative UI components based on Radix UI with full Python interface
  • Events: Type-safe event handling between frontend interactions and backend state changes
  • Pages: Route-based page system with SEO support and metadata management

The framework compiles Python components to React, handles state synchronization via WebSocket, and provides a complete full-stack development experience without requiring JavaScript knowledge.

Capabilities

Core Framework

Application management, reactive state, page routing, and configuration system. Provides the foundation for building full-stack web applications with automatic frontend generation.

@dataclasses.dataclass()
class App(MiddlewareMixin, LifespanMixin):
    """Main application class for creating Reflex apps."""
    theme: Component | None = dataclasses.field(
        default_factory=lambda: themes.theme(accent_color="blue")
    )
    style: ComponentStyle = dataclasses.field(default_factory=dict)
    stylesheets: list[str] = dataclasses.field(default_factory=list)
    enable_state: bool = True
    
    def add_page(
        self, 
        component: Component | ComponentCallable,
        route: str | None = None,
        title: str | Var | None = None,
        description: str | Var | None = None,
        image: str | None = None,
        meta: Sequence[Mapping[str, str]] | None = None,
        on_load: EventType[()] | None = None
    ) -> None: ...
    def compile(self, force_compile: bool = False) -> None: ...
    def __call__(self) -> ASGIApp: ...

class BaseState(EvenMoreBasicBaseState):
    """The core state class that all Reflex states inherit from."""
    @classmethod
    def get_parent_state(cls) -> type[BaseState] | None: ...
    @classmethod
    def get_substates(cls) -> set[type[BaseState]]: ...
    def get_substate(self, path: Sequence[str]) -> BaseState: ...
    async def get_state(self, state_cls: type[T_STATE]) -> T_STATE: ...

class State(BaseState):
    """The app base state class - alias for BaseState."""
    is_hydrated: bool = False
    
    @event
    def set_is_hydrated(self, value: bool) -> None: ...

@page(route: str | None = None, title: str | None = None, **kwargs)
def page_decorator(func: Callable) -> Callable: ...

class Config:
    """Application configuration management."""
    app_name: str
    db_url: str | None = None
    redis_url: str | None = None
    tailwind: dict | None = None

Core Framework

UI Components

60+ Radix UI-based components including layout containers, typography, forms, interactive elements, and data display. All components are fully typed and provide comprehensive styling options.

# Layout Components
def box(*children, **props) -> Component: ...
def flex(*children, direction: str = "row", **props) -> Component: ...
def vstack(*children, spacing: str = "2", **props) -> Component: ...
def hstack(*children, spacing: str = "2", **props) -> Component: ...

# Typography
def heading(*children, size: str = "4", **props) -> Component: ...
def text(*children, size: str = "2", **props) -> Component: ...

# Form Components
def button(*children, variant: str = "solid", **props) -> Component: ...
def input(placeholder: str = "", **props) -> Component: ...
def text_area(placeholder: str = "", **props) -> Component: ...

# Interactive Components
def dialog(*children, **props) -> Component: ...
def popover(*children, **props) -> Component: ...
def tooltip(*children, **props) -> Component: ...

UI Components

Event System

Type-safe event handling connecting frontend interactions to backend state changes. Supports synchronous and asynchronous event handlers with automatic state synchronization.

class EventHandler:
    """Core event handler implementation."""
    fn: Callable
    args: tuple
    kwargs: dict

def event(fn: Callable) -> EventHandler: ...

# Event Actions
def redirect(path: str | Var[str], is_external: bool = False, replace: bool = False) -> EventSpec: ...
def console_log(message: str | Var[str]) -> EventSpec: ...
def download(url: str | Var | None = None, filename: str | Var | None = None, data: str | bytes | Var | None = None) -> EventSpec: ...
def set_clipboard(content: str | Var[str]) -> EventSpec: ...
def window_alert(message: str | Var[str]) -> EventSpec: ...
def scroll_to(elem_id: str, align_to_top: bool | Var[bool] = True) -> EventSpec: ...

Event System

Database & Models

SQLAlchemy-based database integration with automatic migrations, session management, and async support. Includes built-in PostgreSQL configuration and model relationships.

class Model(Base, sqlmodel.SQLModel):
    """Base class to define a table in the database."""
    id: int | None = sqlmodel.Field(default=None, primary_key=True)
    
    def __init_subclass__(cls): ...
    def dict(self, **kwargs): ...

class ModelRegistry:
    """Registry for all models in the application."""
    models: ClassVar[set[SQLModelOrSqlAlchemy]] = set()
    
    @classmethod
    def register(cls, model: SQLModelOrSqlAlchemy): ...

def session() -> Session: ...
def asession() -> AsyncSession: ...

class DBConfig:
    """Database configuration with PostgreSQL support."""
    db_url: str
    engine: Engine | None = None
    migrate: bool = True

Database & Models

Styling & Theming

Comprehensive styling system with CSS-in-Python, responsive design, color modes, and Radix UI theming. Supports custom themes, breakpoints, and design tokens.

class Style:
    """CSS styling management with responsive support."""
    def __init__(self, **kwargs) -> None: ...

def theme(
    accent_color: str = "indigo",
    gray_color: str = "gray", 
    radius: str = "medium",
    **props
) -> Component: ...

def color_mode() -> Component: ...
def toggle_color_mode() -> EventHandler: ...

# Responsive Components
def desktop_only(*children) -> Component: ...
def mobile_only(*children) -> Component: ...
def tablet_only(*children) -> Component: ...

Styling & Theming

Advanced Features

File uploads, testing framework, middleware system, admin dashboard, and experimental features for complex applications.

class UploadFile:
    """File upload handling with validation and storage."""
    filename: str
    content_type: str
    size: int

def upload(*children, **props) -> Component: ...
def middleware(func: Callable) -> Callable: ...

class AdminDash:
    """Admin dashboard configuration and management."""
    def __init__(self, models: list[type[Model]] = None) -> None: ...

Advanced Features

Types

from typing import Any, Callable, Dict, List, Optional, Union
from reflex.vars.base import Var

# Core Types
Component = Any  # Component instance
EventType = Callable | EventHandler | list[EventHandler]
Props = Dict[str, Any]

# Variable Types  
Var[T] = Any  # Reactive variable of type T
ComputedVar[T] = Any  # Computed reactive variable

# State Types
Delta = Dict[str, Any]  # State change delta
StateUpdate = Dict[str, Any]  # State update payload

# Event Types
class Event:
    token: str
    name: str
    router_data: Dict[str, Any]
    payload: Dict[str, Any]

# Storage Types
class Cookie:
    name: str
    value: str
    max_age: int | None = None

class LocalStorage:
    key: str
    value: Any

class SessionStorage:
    key: str  
    value: Any