or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

backend.mdcomponents.mdconfiguration.mdevents.mdhooks.mdhtml-elements.mdindex.mdsvg-elements.mdtesting.mdvdom.mdweb-modules.mdwidgets.md
tile.json

tessl/pypi-reactpy

Reactive user interfaces with pure Python

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
pypipkg:pypi/reactpy@1.1.x

To install, run

npx @tessl/cli install tessl/pypi-reactpy@1.1.0

index.mddocs/

ReactPy

ReactPy is a library for building user interfaces in Python without JavaScript. It provides a component-based architecture with React-style hooks and declarative UI patterns, enabling Python developers to create interactive web applications using familiar React concepts while staying entirely within the Python ecosystem.

Package Information

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

Core Imports

import reactpy

Common patterns for building components:

from reactpy import component, html, use_state

For working with backends:

from reactpy import run
from reactpy.backend import fastapi, flask, starlette  # etc.

Basic Usage

from reactpy import component, html, use_state, run

@component
def Counter():
    count, set_count = use_state(0)
    
    def increment():
        set_count(count + 1)
    
    return html.div(
        html.h1(f"Count: {count}"),
        html.button(
            {"onClick": increment},
            "Increment"
        )
    )

# Run the application
run(Counter)

More complex example with effects:

from reactpy import component, html, use_state, use_effect

@component
def Timer():
    seconds, set_seconds = use_state(0)
    
    def tick():
        set_seconds(seconds + 1)
    
    use_effect(
        lambda: set_interval(tick, 1000),
        []  # Run once on mount
    )
    
    return html.div(
        html.h2(f"Timer: {seconds} seconds"),
        html.p("This timer updates every second")
    )

Architecture

ReactPy follows a component-based architecture inspired by React:

  • Components: Decorated functions that return VDOM elements, managing their own state and lifecycle
  • Hooks: Functions like use_state, use_effect that enable state management and side effects
  • VDOM: Virtual DOM representation for efficient rendering and updates
  • Layouts: Rendering system that manages component trees and updates
  • Backends: Integration layer supporting multiple web frameworks (FastAPI, Flask, etc.)

This design enables reactive interfaces where UI automatically updates when state changes, while providing the flexibility to integrate with various Python web frameworks and deployment scenarios.

Capabilities

Components and Decorators

Core functionality for defining ReactPy components with proper lifecycle management and rendering.

@component
def my_component(*args, **kwargs) -> VdomDict: ...

class Component:
    def __init__(self, function, key, args, kwargs, sig): ...
    key: Any
    type: Callable

Components

Hooks and State Management

React-style hooks for managing component state, side effects, and context in functional components.

def use_state(initial_value: T | Callable[[], T]) -> tuple[T, Callable[[T], None]]: ...
def use_effect(function: Callable[[], None | Callable[[], None]], dependencies: list[Any] | None = None) -> None: ...
def use_callback(function: Callable[..., Any], dependencies: list[Any] | None = None) -> Callable[..., Any]: ...
def use_memo(function: Callable[[], Any], dependencies: list[Any] | None = None) -> Any: ...
def use_ref(initial_value: T = None) -> Ref[T]: ...
def use_context(context: Context[T]) -> T: ...
def use_reducer(reducer: Callable[[S, A], S], initial_state: S) -> tuple[S, Callable[[A], None]]: ...
def use_debug_value(value: Any, formatter: Callable[[Any], str] | None = None) -> None: ...
def use_scope() -> MutableMapping[str, Any]: ...
def use_location() -> Location: ...
def use_connection() -> Connection[Any]: ...
def create_context(default_value: T) -> Context[T]: ...

Hooks

HTML Elements

Complete set of HTML element constructors for building user interfaces declaratively.

def div(*children, **attributes) -> VdomDict: ...
def h1(*children, **attributes) -> VdomDict: ...
def p(*children, **attributes) -> VdomDict: ...
def button(*children, **attributes) -> VdomDict: ...
def input(**attributes) -> VdomDict: ...
def form(*children, **attributes) -> VdomDict: ...
# ... 102 total HTML elements

HTML Elements

SVG Elements

SVG element constructors for creating scalable vector graphics and data visualizations.

def svg(*children, **attributes) -> VdomDict: ...
def circle(**attributes) -> VdomDict: ...
def rect(**attributes) -> VdomDict: ...
def path(**attributes) -> VdomDict: ...
def g(*children, **attributes) -> VdomDict: ...
# ... 69 total SVG elements

SVG Elements

Event Handling

Event system for handling user interactions with proper event delegation and prevention.

def event(
    function: Callable[..., Any] | None = None,
    *,
    stop_propagation: bool = False,
    prevent_default: bool = False,
) -> EventHandler | Callable[[Callable[..., Any]], EventHandler]: ...

class EventHandler:
    function: EventHandlerFunc
    prevent_default: bool
    stop_propagation: bool
    target: str | None
    
    def __init__(
        self,
        function: EventHandlerFunc,
        stop_propagation: bool = False,
        prevent_default: bool = False,
        target: str | None = None,
    ) -> None: ...

Events

Backend Integration

Support for multiple web frameworks enabling deployment across different Python web environments.

def run(
    component: RootComponentConstructor,
    host: str = "127.0.0.1",
    port: int | None = None,
    implementation: BackendType[Any] | None = None,
) -> None: ...

# Backend-specific functions
# From reactpy.backend.fastapi
def configure(app: FastAPI, component: RootComponentConstructor, options: Options | None = None) -> None: ...

# From reactpy.backend.flask  
def configure(app: Flask, component: RootComponentConstructor, options: Options | None = None) -> None: ...

# From reactpy.backend.starlette
def configure(app: Starlette, component: RootComponentConstructor, options: Options | None = None) -> None: ...

# From reactpy.backend.sanic
def configure(app: Sanic[Any, Any], component: RootComponentConstructor, options: Options | None = None) -> None: ...

# From reactpy.backend.tornado
def configure(app: Application, component: RootComponentConstructor, options: Options | None = None) -> None: ...

Backend Integration

VDOM and Rendering

Virtual DOM system for efficient component rendering and layout management.

def vdom(tag: str, *children, **attributes) -> VdomDict: ...
def html_to_vdom(html_string: str) -> VdomDict: ...
def vdom_to_html(vdom_dict: VdomDict) -> str: ...

class Layout:
    def __init__(self, component: ComponentType): ...
    async def render() -> LayoutUpdate: ...
    async def deliver(event: LayoutEvent) -> None: ...

VDOM and Rendering

Web Modules

JavaScript module integration system for incorporating client-side functionality.

def module_from_template(name: str, template: str, **params) -> WebModule: ...
def module_from_file(name: str, file: str | Path) -> WebModule: ...
def module_from_url(name: str, url: str, dev: bool = False) -> WebModule: ...

# Overloaded export function
def export(
    web_module: WebModule,
    export_names: str,
    fallback: Any | None = None,
    allow_children: bool = True,
) -> VdomDictConstructor: ...

def export(
    web_module: WebModule,
    export_names: list[str] | tuple[str, ...],
    fallback: Any | None = None,
    allow_children: bool = True,
) -> list[VdomDictConstructor]: ...

Web Modules

Widgets and Utilities

Pre-built components and utility functions for common use cases and data manipulation.

def image(src: str, **attributes) -> VdomDict: ...
def linked_inputs(*inputs) -> list[VdomDict]: ...

class Ref[T]:
    current: T
    def __init__(self, initial_value: T = None): ...

def SampleApp() -> VdomDict: ...

Widgets and Utilities

Testing Support

Comprehensive testing framework with fixtures and utilities for component testing.

class BackendFixture:
    def __init__(self, implementation): ...
    async def mount(self, component: ComponentType) -> None: ...
    
class DisplayFixture:
    def __init__(self, backend_fixture): ...
    def goto(self, path: str) -> None: ...
    async def mount(self, component: ComponentType) -> None: ...
    page: Page  # Playwright page object

def poll(coroutine: Callable, timeout: float = None) -> Any: ...

Testing

Configuration

Configuration options and environment variables for customizing ReactPy behavior.

# Configuration variables (set via environment)
REACTPY_DEBUG_MODE: bool
REACTPY_BACKEND_HOST: str
REACTPY_BACKEND_PORT: int
REACTPY_WEB_MODULES_DIR: str
REACTPY_ASYNC_RENDERING: bool

Configuration

Types

Core type definitions used throughout ReactPy:

# Component Types
ComponentType = Protocol
ComponentConstructor = Callable[..., ComponentType]
RootComponentConstructor = Callable[[], ComponentType]

# State Management
State[T] = NamedTuple  # (value: T, set_value: Callable[[T], None])
Context[T] = TypeVar("Context")

# VDOM Types  
VdomDict = dict[str, Any]
VdomChild = ComponentType | VdomDict | str | None
VdomChildren = Sequence[VdomChild]
VdomAttributes = dict[str, Any]

# Event Handling
EventHandlerFunc = Callable[..., Any]
EventHandlerType = EventHandler | EventHandlerFunc
EventHandlerMapping = dict[str, EventHandlerType]

# Utility Types
Key = str | int
Location = NamedTuple  # Backend-specific location info
Connection[T] = TypeVar("Connection")  # Backend-specific connection
BackendType[T] = Protocol  # Backend implementation interface

# Layout and Rendering
LayoutType = Protocol  # Manages component trees and updates

# Web Modules
WebModule = Any  # JavaScript module integration
VdomDictConstructor = Callable[..., VdomDict]