Reflex

https://reflex.dev/docs
Admin
Reflex is a Python framework for building full-stack web applications that compile to React and...
Tokens:425,679
Snippets:4,453
Trust Score:9.3
Update:1 month ago
Show doc for...
Tokens:
Raw
### Clone and Setup Development Environment

Source: https://reflex.dev/docs/xy/api-reference/contributing

Initializes the local repository and installs necessary dependencies for development.

```bash
git clone https://github.com/reflex-dev/xy.git
cd xy
make setup
make check
```

--------------------------------

### Install uv on Windows

Source: https://reflex.dev/docs/getting-started/installation

Use the PowerShell installation script to install uv on native Windows.

```powershell
powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"
```

--------------------------------

### Install dependencies in air-gapped environments

Source: https://reflex.dev/docs/xy/guides/deployment-recipes

Installs the pre-downloaded wheels in a disconnected environment and verifies the installation.

```bash
python -m pip install \
  --no-index \
  --find-links wheelhouse \
  "xy==0.0.1"

python -m pip check
python -c "import xy, xy.kernels as k; print(xy.__version__, k.BACKEND)"
```

--------------------------------

### Install Optional Dependencies

Source: https://reflex.dev/docs/xy/overview/installation

Install additional packages like pyarrow or the Reflex integration.

```bash
uv add pyarrow
```

```bash
uv add "xy[reflex]"
```

```bash
python -m pip install "xy[reflex]"
```

--------------------------------

### Start an application

Source: https://reflex.dev/docs/hosting/cli/apps

Start a previously stopped application by providing its ID.

```bash
$ reflex cloud apps start [OPTIONS] APP_ID
```

--------------------------------

### Install uv on macOS/Linux

Source: https://reflex.dev/docs/getting-started/installation

Use the official installation script to install uv on Unix-based systems.

```bash
curl -LsSf https://astral.sh/uv/install.sh | sh
```

--------------------------------

### Initialize Reflex project on macOS/Linux

Source: https://reflex.dev/docs/getting-started/installation

Create a new directory, initialize the environment, and install Reflex.

```bash
mkdir <your-app>
cd <your-app>
uv init
uv add reflex
uv run reflex init
```

--------------------------------

### Display Agent Installation Preview

Source: https://reflex.dev/docs/ai/features/installing-external-packages

Visual representation of the package installation process via the chat interface.

```python
rx.el.div(
    rx.image(
        src="https://web.reflex-assets.dev/docs-preview/ai-builder/platform/agent_package_install.webp",
        alt="Installing external packages via the chat interface",
        class_name="rounded-md h-auto mb-4",
        border=f"0.81px solid {rx.color('slate', 5)}",
    ),
    class_name="w-full flex flex-col rounded-md",
)
```

--------------------------------

### Install Reflex Integration

Source: https://reflex.dev/docs/xy/integrations/reflex

Install the required dependencies using your preferred package manager.

```bash
uv add "xy[reflex]"
```

--------------------------------

### Install XY and pandas

Source: https://reflex.dev/docs/xy/guides/dataframes-and-real-data

Install the required packages using pip.

```bash
python -m pip install xy pandas
```

--------------------------------

### Install XY Reflex Integration

Source: https://reflex.dev/docs/xy/guides/deployment-recipes

Commands to install the experimental bundled integration for Reflex applications.

```bash
uv add "xy[reflex]"
```

```bash
python -m pip install "xy[reflex]"
```

--------------------------------

### Install Async Drivers

Source: https://reflex.dev/docs/database/queries

Install the necessary async database drivers for your specific database engine.

```bash
pip install aiosqlite
```

```bash
pip install "psycopg[binary]"
```

--------------------------------

### Install Testing Dependencies

Source: https://reflex.dev/docs/enterprise/testing

Install the reflex-enterprise testing extra and a browser driver for Playwright.

```bash
uv add "reflex-enterprise[testing]>=0.9.2"
uv add pytest-playwright         # browser driver of your choice
uv run playwright install chromium
```

--------------------------------

### Install XY from Git Source

Source: https://reflex.dev/docs/xy/overview/installation

Install a specific tagged version directly from the GitHub repository using uv or pip.

```bash
uv add "xy @ git+https://github.com/reflex-dev/xy.git@v0.0.1"
```

```bash
python -m pip install "xy @ git+https://github.com/reflex-dev/xy.git@v0.0.1"
```

--------------------------------

### Install XY via Package Manager

Source: https://reflex.dev/docs/xy/overview/installation

Install the core XY package using uv or pip.

```bash
uv add xy
```

--------------------------------

### Multi-Environment Configuration Files

Source: https://reflex.dev/docs/hosting/config-file

Examples of environment-specific configuration files for development, staging, and production.

```yaml
name: myapp-dev
description: 'Development environment'
vmtype: c1m1
envfile: .env.development
```

```yaml
name: myapp-staging
description: 'Staging environment'
regions:
  sjc: 1
vmtype: c2m2
envfile: .env.staging
```

```yaml
name: myapp-production
description: 'Production environment'
regions:
  sjc: 2
  lhr: 1
vmtype: c4m4
hostname: myapp
envfile: .env.production
```

--------------------------------

### Project Structure Example

Source: https://reflex.dev/docs/ai/integrations/agents-md

Shows the expected location of agent configuration files in a Reflex project.

```text
my_app/
  AGENTS.md
  CLAUDE.md
  rxconfig.py
  my_app/
    my_app.py
```

--------------------------------

### Run Reflex in development mode

Source: https://reflex.dev/docs/getting-started/installation

Starts the application server with hot reloading enabled.

```bash
uv run reflex run
```

--------------------------------

### Project Structure for Docker

Source: https://reflex.dev/docs/hosting/self-hosting

Example directory structure for a Reflex project prepared for containerization.

```text
hello
├── .web
├── assets
├── hello
│   ├── __init__.py
│   └── hello.py
├── rxconfig.py
├── Dockerfile
└── requirements.txt
```

--------------------------------

### Basic rx.text Component Usage

Source: https://reflex.dev/docs/library/typography/text

Example of initializing the rx.text component with various styling props.

```python
rx.text(
size="1",
weight="light",
align="left",
color_scheme="tomato",
high_contrast=False,
)
```

--------------------------------

### Configuring AG Grid Pivot Mode

Source: https://reflex.dev/docs/enterprise/ag-grid/pivot-mode

Example demonstrating the setup of pivot_mode, row_group, and aggFunc within an AG Grid component.

```python
import pandas as pd
import reflex as rx

import reflex_enterprise as rxe

# Olympic winners data (originally from https://www.ag-grid.com/example-assets/olympic-winners.json)
df = pd.read_json("data/olympic-winners.json")


def pivot_page():
    return (
        rxe.ag_grid(
            id="sandbox_grid",
            column_defs=[
                {"field": "country", "row_group": True},
                {"field": "sport", "pivot": True},
                {"field": "year", "pivot": True},
                {"field": "gold", "aggFunc": "sum"},
            ],
            loading=False,
            row_data=df.to_dict("records"),
            default_col_def={
                "flex": 1,
                "min_width": 130,
                "enable_value": True,
                "enable_row_group": True,
                "enable_pivot": True,
            },
            auto_group_column_def={
                "minWidth": 200,
                "pinned": "left",
            },
            pivot_mode=True,
            side_bar="columns",
            pivot_panel_show="always",
            width="100%",
            height="500px",
        ),
    )
```

--------------------------------

### Initialize custom component help

Source: https://reflex.dev/docs/custom-components/command-reference

Displays the help manual for the component initialization command.

```bash
reflex component init --help
```

--------------------------------

### Setup Python Environment with uv

Source: https://reflex.dev/docs/ai/integrations/skills

Recommended workflow for initializing a Reflex project using the uv package manager.

```bash
uv venv .venv
source .venv/bin/activate
uv add reflex
reflex init
```

--------------------------------

### Deploying with Configuration Files

Source: https://reflex.dev/docs/hosting/config-file

Commands to deploy using the default configuration or a specific file.

```bash
# Use default cloud.yml
reflex deploy

# Use specific configuration file
reflex deploy --config cloud-prod.yml
reflex deploy --config cloud-staging.yml
```

--------------------------------

### Initialize App and Add Pages

Source: https://reflex.dev/docs/getting-started/introduction

Create the application instance and register pages to specific routes.

```python
app = rx.App()
app.add_page(index)
```

--------------------------------

### Install OpenAI Package

Source: https://reflex.dev/docs/getting-started/chatapp-tutorial

Install the required OpenAI Python library.

```bash
pip install --upgrade openai
```

--------------------------------

### Display help for reflex component build

Source: https://reflex.dev/docs/custom-components/command-reference

Access the command-line help documentation for the build utility.

```bash
reflex component build --help
```

--------------------------------

### Setup Python Environment with pip

Source: https://reflex.dev/docs/ai/integrations/skills

Fallback workflow for initializing a Reflex project when uv is not available.

```bash
python3 -m venv .venv
source .venv/bin/activate
pip install --upgrade pip
pip install reflex
reflex init
```

--------------------------------

### Full Application Implementation

Source: https://reflex.dev/docs/getting-started/dashboard-tutorial

A complete example showing the state management, dialog-based form, and table display for user data.

```python
@dataclasses.dataclass
class User:
    """The user model."""

    name: str
    email: str
    gender: str


class State(rx.State):
    users: list[User] = [
        User(name="Danilo Sousa", email="danilo@example.com", gender="Male"),
        User(name="Zahra Ambessa", email="zahra@example.com", gender="Female"),
    ]

    def add_user(self, form_data: dict):
        self.users.append(User(**form_data))


def show_user(user: User):
    """Show a person in a table row."""
    return rx.table.row(
        rx.table.cell(user.name),
        rx.table.cell(user.email),
        rx.table.cell(user.gender),
    )


def add_customer_button() -> rx.Component:
    return rx.dialog.root(
        rx.dialog.trigger(
            rx.button(
                rx.icon("plus", size=26),
                rx.text("Add User", size="4"),
            ),
        ),
        rx.dialog.content(
            rx.dialog.title(
                "Add New User",
            ),
            rx.dialog.description(
                "Fill the form with the user's info",
            ),
            rx.form(
                rx.flex(
                    rx.input(placeholder="User Name", name="name", required=True),
                    rx.input(
                        placeholder="user@reflex.dev",
                        name="email",
                    ),
                    rx.select(
                        ["Male", "Female"],
                        placeholder="Male",
                        name="gender",
                    ),
                    rx.flex(
                        rx.dialog.close(
                            rx.button(
                                "Cancel",
                                variant="soft",
                                color_scheme="gray",
                            ),
                        ),
                        rx.dialog.close(
                            rx.button("Submit", type="submit"),
                        ),
                        spacing="3",
                        justify="end",
                    ),
                    direction="column",
                    spacing="4",
                ),
                on_submit=State.add_user,
                reset_on_submit=False,
            ),
            max_width="450px",
        ),
    )


def index() -> rx.Component:
    return rx.vstack(
        add_customer_button(),
        rx.table.root(
            rx.table.header(
                rx.table.row(
                    rx.table.column_header_cell("Name"),
                    rx.table.column_header_cell("Email"),
                    rx.table.column_header_cell("Gender"),
                ),
            ),
            rx.table.body(
                rx.foreach(State.users, show_user),
            ),
            variant="surface",
            size="3",
        ),
    )
```

--------------------------------

### Install MCP dependency

Source: https://reflex.dev/docs/enterprise/mcp

Install the required enterprise package with the mcp extra.

```bash
pip install "reflex-enterprise[mcp]"
```

--------------------------------

### Initialize App with rxe.App

Source: https://reflex.dev/docs/authentication/authentication-overview

Use rxe.App instead of the standard rx.App to enable enterprise authentication features.

```python
rxe.App()
```

--------------------------------

### Initialize Reflex Project

Source: https://reflex.dev/docs/getting-started/chatapp-tutorial

Commands to create a new directory, initialize the environment, and scaffold a Reflex application.

```bash
mkdir chatapp
cd chatapp
uv init
uv add reflex
uv run reflex init
```

--------------------------------

### Verify XY Installation

Source: https://reflex.dev/docs/xy/overview/installation

Confirm the package is correctly installed and accessible by printing the version.

```bash
python -c "import xy; print(xy.__version__)"
```

--------------------------------

### Initialize a Custom Component

Source: https://reflex.dev/docs/custom-components/command-reference

Run the init command to scaffold a new custom component project.

```bash
reflex component init
```

```text
reflex component init
─────────────────────────────────────── Initializing reflex-google-auth project ───────────────────────────────────────
Info: Populating pyproject.toml with package name: reflex-google-auth
Info: Initializing the component directory: custom_components/reflex_google_auth
Info: Creating app for testing: google_auth_demo
──────────────────────────────────────────── Initializing google_auth_demo ────────────────────────────────────────────
[07:58:16] Initializing the app directory.                                                                console.py:85
           Initializing the web directory.                                                                console.py:85
Success: Initialized google_auth_demo
─────────────────────────────────── Installing reflex-google-auth in editable mode. ───────────────────────────────────
Info: Package reflex-google-auth installed!
Custom component initialized successfully!
─────────────────────────────────────────────────── Project Summary ───────────────────────────────────────────────────
[ README.md ]: Package description. Please add usage examples.
[ pyproject.toml ]: Project configuration file. Please fill in details such as your name, email, homepage URL.
[ custom_components/ ]: Custom component code template. Start by editing it with your component implementation.
[ google_auth_demo/ ]: Demo App. Add more code to this app and test.
```

--------------------------------

### Build and preview static site

Source: https://reflex.dev/docs/xy/guides/deployment-recipes

Executes the build script and serves the resulting directory using a local HTTP server.

```bash
python build_report.py
python -m http.server 8000 --directory site
```

--------------------------------

### Install libsass Dependency

Source: https://reflex.dev/docs/styling/custom-stylesheets

Install the required package for SASS/SCSS compilation if not already present.

```bash
pip install "libsass>=0.23.0"
```

--------------------------------

### Initialize a Custom Component Project

Source: https://reflex.dev/docs/custom-components/overview

Creates the directory structure and configuration files required for a new custom component package.

```bash
reflex component init
```

--------------------------------

### Install Database Dependencies

Source: https://reflex.dev/docs/database/overview

Install the necessary ORM dependencies including SQLModel and Alembic.

```bash
pip install "reflex[db]"
```

--------------------------------

### Initialize a new Reflex project

Source: https://reflex.dev/docs/getting-started/project-structure

Commands to create a new directory, initialize a Python project with uv, add Reflex as a dependency, and initialize the Reflex app structure.

```bash
mkdir hello
cd hello
uv init
uv add reflex
uv run reflex init
```

--------------------------------

### React ECharts Example

Source: https://reflex.dev/docs/wrapping-react/props

Example of a React component requiring a mapping of event handlers.

```javascript
<ReactECharts
  option={this.getOption()}
  style={{ height: "300px", width: "100%" }}
  onEvents={{
    click: this.onChartClick,
    legendselectchanged: this.onChartLegendselectchanged,
  }}
/>
```

--------------------------------

### Agent Prompt Example

Source: https://reflex.dev/docs/ai/features/image-as-prompt

Example text prompt for providing layout instructions to the agent.

```text
Use the attached screenshot as a layout reference.
Match its navigation width,
card hierarchy, and spacing, but keep the current brand colors and content.
```

--------------------------------

### Cloud Configuration File Structure

Source: https://reflex.dev/docs/hosting/config-file

Example of a complete cloud.yml file showing all available deployment settings.

```yaml
# Basic deployment settings
name: my-app-prod                    # Optional: defaults to project folder name
description: 'Production deployment' # Optional: empty by default
projectname: my-client-project          # Optional: defaults to personal project

# Infrastructure settings
regions:                            # Optional: defaults to sjc: 1
  sjc: 1                           # San Jose (# of machines)
  lhr: 2                           # London (# of machines)
vmtype: c2m2                       # Optional: defaults to c1m1

# Custom domain and environment
hostname: myapp                    # Optional: myapp.reflex.dev
envfile: .env.production           # Optional: defaults to .env

# Additional dependencies
packages:                          # Optional: empty by default
  - procps
```

--------------------------------

### Initialize Reflex Agent Files

Source: https://reflex.dev/docs/ai/integrations/agents-md

Generates the starter AGENTS.md and CLAUDE.md files in the project root.

```bash
reflex init
```

--------------------------------

### Check installed version

Source: https://reflex.dev/docs/xy/guides/getting-help

Verify the installed library version to ensure documentation matches the environment.

```python
xy.__version__
```

--------------------------------

### Install reflex-pyplot

Source: https://reflex.dev/docs/library/graphing/other-charts/pyplot

Install the required package via pip to enable Matplotlib support in Reflex.

```bash
pip install reflex-pyplot
```

--------------------------------

### Create a Basic Map with Marker

Source: https://reflex.dev/docs/enterprise/map

Demonstrates initializing a map with a tile layer and a marker using a state-managed center and zoom level.

```python
import reflex as rx
import reflex_enterprise as rxe


class MapState(rx.State):
    center: rxe.map.LatLng = rxe.map.latlng(lat=51.505, lng=-0.09)
    zoom: float = 13.0


def basic_map():
    return rxe.map(
        rxe.map.tile_layer(
            url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
            attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        ),
        rxe.map.marker(
            rxe.map.popup("Hello from London!"),
            position=MapState.center,
        ),
        id="basic-map",
        center=MapState.center,
        zoom=MapState.zoom,
        height="400px",
        width="100%",
    )
```

--------------------------------

### Create a new Reflex Cloud project

Source: https://reflex.dev/docs/hosting/cli/projects

Initialize a new project by providing a unique name.

```bash
$ reflex cloud project create [OPTIONS] NAME
```

--------------------------------

### Reflex component init command usage

Source: https://reflex.dev/docs/custom-components/command-reference

Detailed usage instructions and available options for the component initialization command.

```text
Usage: reflex component init [OPTIONS]

  Initialize a custom component.

  Args:     library_name: The name of the library.     install: Whether to
  install package from this local custom component in editable mode.
  loglevel: The log level to use.

  Raises:     Exit: If the pyproject.toml already exists.

Options:
  --library-name TEXT             The name of your library. On PyPI, package
                                  will be published as `reflex-{library-
                                  name}`.
  --install / --no-install        Whether to install package from this local
                                  custom component in editable mode.
                                  [default: install]
  --loglevel [debug|info|warning|error|critical]
                                  The log level to use.  [default:
                                  LogLevel.INFO]
  --help                          Show this message and exit.
```

--------------------------------

### Install Reflex Enterprise

Source: https://reflex.dev/docs/enterprise/overview

Installs the enterprise package via pip to enable access to premium features.

```bash
pip install reflex-enterprise
```

--------------------------------

### Install and run tests with pytest-cov

Source: https://reflex.dev/docs/enterprise/testing

Install the necessary dependency and execute tests with coverage reporting enabled.

```bash
uv add "pytest-cov>=7.1"
uv run pytest --cov
```

--------------------------------

### Install Reflex Agent Skills in Claude Code

Source: https://reflex.dev/docs/ai/integrations/skills

Use the plugin marketplace commands to add and install the skills package.

```text
/plugin marketplace add reflex-dev/agent-skills
/plugin install reflex@reflex-agent-skills
```

--------------------------------

### Example AWS Access Key ID

Source: https://reflex.dev/docs/ai/integrations/aws

This is an example of an AWS Access Key ID used for authenticating API requests. It should be kept confidential.

```text
AKIAIOSFODNN7EXAMPLE
```

--------------------------------

### GitHub Personal Access Token Example

Source: https://reflex.dev/docs/ai/integrations/github

This is an example of a GitHub Personal Access Token. Replace the placeholder with your actual token. Fine-grained tokens are recommended for enhanced security.

```text
ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
```

--------------------------------

### Example AWS Secret Access Key

Source: https://reflex.dev/docs/ai/integrations/aws

This is an example of an AWS Secret Access Key, which is used in conjunction with the Access Key ID for authentication. It must be kept highly confidential.

```text
wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY
```

--------------------------------

### Configure EventHandlerAPIPlugin

Source: https://reflex.dev/docs/enterprise/event-handler-api

Minimal configuration setup for the EventHandlerAPIPlugin in rxconfig.py.

```python
import reflex as rx
import reflex_enterprise as rxe

config = rxe.Config(
    app_name="tickets",
    async_db_url="sqlite+aiosqlite:///tickets.db",
    db_url="sqlite:///tickets.db",
    plugins=[
        rxe.EventHandlerAPIPlugin(
            contact={"name": "Reflex Maintainers", "email": "info@reflex.dev"},
            license_info={
                "name": "Apache 2.0",
                "url": "https://opensource.org/licenses/Apache-2.0",
            },
        )
    ],
    disable_plugins=[rx.plugins.SitemapPlugin],
)
```

--------------------------------

### Download dependencies for air-gapped environments

Source: https://reflex.dev/docs/xy/guides/deployment-recipes

Downloads XY and its dependencies as binary wheels on a connected machine for offline installation.

```bash
mkdir -p wheelhouse
python -m pip download \
  --only-binary=:all: \
  --dest wheelhouse \
  "xy==0.0.1"
```

--------------------------------

### Basic console log example

Source: https://reflex.dev/docs/library/typography/code

A simple demonstration of the console.log function.

```javascript
console.log()
```

--------------------------------

### OpenAPI specification excerpt

Source: https://reflex.dev/docs/enterprise/event-handler-api

Example of the generated OpenAPI schema for the create_ticket handler.

```yaml
/_reflex/event/tickets___tickets____ticket_state/create_ticket:
  post:
    summary: Create a new IT support ticket.
    description: |
      title: Short summary of the issue.
      description: Optional long-form description.
      priority: One of "low", "medium", "high".
      assignee: Username of the person handling the ticket.
    operationId: TicketState_create_ticket
    tags: [TicketState]
    requestBody:
      required: true
      content:
        application/json:
          schema:
            type: object
            required: [title]
            properties:
              title:       {type: string}
              description: {type: string, default: ""}
              priority:    {type: string, default: medium}
              assignee:    {type: string, default: ""}
    responses:
      "200": {$ref: "#/components/responses/StreamedDelta"}
      "401": {$ref: "#/components/responses/Unauthorized"}
      "429": {$ref: "#/components/responses/RateLimited"}
```
Tokens:
Raw