Web apps in pure Python with reactive components and automatic frontend generation.
—
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Pending
The risk profile of this skill
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.
pip install refleximport reflex as rxCommon state and component patterns:
from reflex import State, Component, Varimport 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()Reflex follows a reactive architecture with clear separation of concerns:
The framework compiles Python components to React, handles state synchronization via WebSocket, and provides a complete full-stack development experience without requiring JavaScript knowledge.
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 = None60+ 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: ...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: ...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 = TrueComprehensive 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: ...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: ...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