### Install Rio UI

Source: https://github.com/rio-labs/rio/blob/main/README.md

Install the Rio UI package using pip. This is the initial step to get started with Rio.

```bash
pip install rio-ui
```

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

### Install Pre-commit Hooks

Source: https://github.com/rio-labs/rio/blob/main/CONTRIBUTING.md

Install pre-commit hooks to run basic checks automatically before creating commits.

```bash
python -m pre_commit install
```

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

### Install Node.js Dependencies

Source: https://github.com/rio-labs/rio/blob/main/CONTRIBUTING.md

Install development dependencies for the TypeScript frontend using npm.

```bash
npm install
```

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

### Install Python Dependencies with Uv

Source: https://github.com/rio-labs/rio/blob/main/CONTRIBUTING.md

Install all Python dependencies, including extras for local app development and testing, using the uv package manager.

```bash
uv sync --all-extras
```

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

### Run Frontend Integration Tests

Source: https://github.com/rio-labs/rio/blob/main/CLAUDE.md

Executes frontend integration tests using pytest. Requires browser setup.

```bash
uv run pytest tests/test_frontend/
```

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

### Run Rio App in Development Mode

Source: https://github.com/rio-labs/rio/blob/main/CLAUDE.md

Starts a Rio application in development mode. This is the primary command for local development.

```bash
rio run
```

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

### Rio Component Structure as Dataclass

Source: https://github.com/rio-labs/rio/wiki/Components

Example of a Rio component defined as a dataclass, including attributes and a build method.

```python
class CatInput(rio.Component):
    name: str
    age: int
    loves_catnip: bool

    def build(self) -> rio.Component:
        return ...
```

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

### Run All Python Tests

Source: https://github.com/rio-labs/rio/blob/main/CLAUDE.md

Executes all Python tests using pytest. Ensure Python dependencies are installed first.

```bash
uv run pytest
```

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

### Custom __setattr__ for Attribute Observation

Source: https://github.com/rio-labs/rio/wiki/Components

This example demonstrates how to implement a custom __setattr__ method in a Python class to log attribute assignments. This illustrates the mechanism Rio uses to detect changes.

```python
class MyClass:
    def __setattr__(self, name, value):
        print(f"Setting {name} to {value}")
        self.__dict__[name] = value
```

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

### Create a Rio Project with Template and Run

Source: https://github.com/rio-labs/rio/blob/main/README.md

Create a new Rio project named 'my-project' using the 'website' type and 'Tic-Tac-Toe' template, then run it. This demonstrates a complete workflow from project creation to execution.

```bash
rio new my-project --type website --template "Tic-Tac-Toe"
cd my-project
rio run
```

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

### Traditional Class Initialization with Inheritance

Source: https://github.com/rio-labs/rio/wiki/Components

Demonstrates the verbosity of initializing classes with inheritance using the traditional method.

```python
class Animal:
    def __init__(self, name: str, age: int) -> None:
        self.name = name
        self.age = age


class Cat(Animal):
    def __init__(self, name: str, age: int, loves_catnip: bool) -> None:
        super().__init__(name, age)
        self.loves_catnip = loves_catnip


class Dog(Animal):
    def __init__(self, name: str, age: int, is_good_boy: bool) -> None:
        super().__init__(name, age)
        self.is_good_boy = is_good_boy
```

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

### Dataclass Initialization with Inheritance

Source: https://github.com/rio-labs/rio/wiki/Components

Shows the simplified approach to defining classes with inheritance using Python's dataclasses.

```python
from dataclasses import dataclass


@dataclass
class Animal:
    name: str
    age: int


@dataclass
class Cat(Animal):
    loves_catnip: bool


@dataclass
class Dog(Animal):
    is_good_boy: bool
```

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

### Create a New Rio Project

Source: https://github.com/rio-labs/rio/blob/main/README.md

Use the 'rio new' command to create a new project. This command initializes a project structure for you.

```bash
rio new
```

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

### Run All Pre-commit Hooks

Source: https://github.com/rio-labs/rio/blob/main/CLAUDE.md

Executes all configured pre-commit hooks across the repository. Use this to ensure code quality before committing.

```bash
pre-commit run --all-files
```

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

### Traditional Class Initialization

Source: https://github.com/rio-labs/rio/wiki/Components

Illustrates the verbose way to define a class with attributes without using dataclasses.

```python
class Cat:
    def __init__(self, name: str, age: int, loves_catnip: bool) -> None:
        self.name = name
        self.age = age
        self.loves_catnip = loves_catnip
```

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

### Build Frontend

Source: https://github.com/rio-labs/rio/blob/main/CONTRIBUTING.md

Build the TypeScript frontend component for development using npm.

```bash
npm run dev-build
```

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

### Run Rio App in Window

Source: https://github.com/rio-labs/rio/blob/main/CLAUDE.md

Configures the Rio application to run as a local desktop app. Use this for standalone desktop applications.

```python
app.run_in_window()
```

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

### Initialize Theme and Global Variables

Source: https://github.com/rio-labs/rio/blob/main/frontend/index.html

Applies the theme's background color immediately on page load to prevent screen flashing. It also sets global JavaScript variables used throughout the application.

```javascript
const LIGHT_THEME_BACKGROUND_COLOR = "{light_theme_background_color}";
const DARK_THEME_BACKGROUND_COLOR = "{dark_theme_background_color}";
let useLightTheme = !window.matchMedia( "(prefers-color-scheme: dark)" ).matches;
let themeVariables;

// Apply the background color and also set a data attribute on the
// HTML. This will be used by CSS to switch code highlighting
// themes.
if (useLightTheme) {
  document.documentElement.style.backgroundColor = LIGHT_THEME_BACKGROUND_COLOR;
  document.documentElement.setAttribute("data-theme", "light");
} else {
  document.documentElement.style.backgroundColor = DARK_THEME_BACKGROUND_COLOR;
  document.documentElement.setAttribute("data-theme", "dark");
}

globalThis.SESSION_TOKEN = "{session_token}";
globalThis.PING_PONG_INTERVAL_SECONDS = "{ping_pong_interval}";
globalThis.RIO_DEBUG_MODE = "{debug_mode}";
globalThis.RUNNING_IN_WINDOW = "{running_in_window}";
globalThis.CHILD_ATTRIBUTE_NAMES = "{child_attribute_names}";

// Always end with a slash
globalThis.RIO_BASE_URL = "/rio-base-url-placeholder/";
globalThis.initialMessages = "{initial_messages}";
```

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

### Build Frontend

Source: https://github.com/rio-labs/rio/blob/main/CLAUDE.md

Builds the frontend assets. This is required before first use and after any TypeScript changes.

```bash
npm run build
```

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

### Python Import Style: Prefer Modules

Source: https://github.com/rio-labs/rio/blob/main/CLAUDE.md

Demonstrates the preferred method of importing entire modules in Python for better code organization and clarity.

```python
# Good
import traceback
traceback.print_exc()

# Avoid
from traceback import print_exc
```

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

### Simple Counter Component

Source: https://github.com/rio-labs/rio/wiki/Components

A basic Rio component demonstrating state initialization, a build method, and automatic rebuilds triggered by state variable assignments.

```python
class MyRoot(rio.Component):
    """
    A simple counter component. Displays a number and a button to increment it.
    """

    counter: int = 0  # Custom state variable

    def _on_press(self) -> None:
        self.counter += 1  # State change triggers rebuild

    def build(self) -> rio.Component:
        return rio.Column(
            rio.Text(
                str(self.counter),
                justify="center",
            ),
            rio.Button(
                "Increment",
                icon="material/add",
                on_press=self._on_press,
            ),
            spacing=1,
            align_x=0.5,
            align_y=0.5,
        )
```

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

### Run Rio App in Browser

Source: https://github.com/rio-labs/rio/blob/main/CLAUDE.md

Configures the Rio application to run as a web app. Use this for web-based deployments.

```python
app.run_in_browser()
```

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

### Manual Rebuild Trigger

Source: https://github.com/rio-labs/rio/wiki/Components

Demonstrates how to manually trigger a component rebuild using `force_refresh()` when state changes, like list appends, are not automatically detected.

```python
self.counter += 1  # Detected and rebuild triggered
```

```python
self.counter_list.append(42)  # Not detected
```

```python
class MyRoot(rio.Component):
    """
    A counter component that tracks all past values.
    """

    counter: list[int] = [0]  # Custom state variable

    def _on_press(self) -> None:
        next_value = len(self.counter)
        self.counter.append(next_value)  # No assignment; not auto-detected
        self.force_refresh()  # Manually trigger rebuild

    def build(self) -> rio.Component:
        return rio.Column(
            *[
                rio.Text(
                    str(value),
                    justify="center",
                )
                for value in self.counter
            ],
            rio.Button(
                "Increment",
                icon="material/add",
                on_press=self._on_press,
            ),
            spacing=1,
            align_x=0.5,
            align_y=0.5,
        )
```

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

### Format Python Code

Source: https://github.com/rio-labs/rio/blob/main/CLAUDE.md

Formats Python code using ruff to enforce consistent style. Run before committing code.

```bash
python -m ruff format .
```

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

### Run Python Tests with Coverage

Source: https://github.com/rio-labs/rio/blob/main/CLAUDE.md

Runs Python tests and generates a code coverage report using a custom script.

```bash
uv run scripts/code_coverage.py
```

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

### Clone Rio Repository

Source: https://github.com/rio-labs/rio/blob/main/CONTRIBUTING.md

Clone the Rio repository from GitHub to your local machine. Replace YOUR_USERNAME with your GitHub username.

```bash
git clone git@github.com:YOUR_USERNAME/rio.git
```

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

### Create an Interactive Button Clicker Component

Source: https://github.com/rio-labs/rio/blob/main/README.md

This Python snippet demonstrates how to define a Rio component that counts button clicks and displays the count. It shows how to declare component attributes, define methods to handle events, and build the UI using Rio's declarative components. The app can be run in a browser or a local window.

```python
# Define a component that counts button clicks
class ButtonClicker(rio.Component):
    # Define the attributes of the component. Rio will watch these
    # for changes and automatically update the GUI.
    clicks: int = 0

    # Define a method that increments the click count. We'll later
    # make a button that calls this method whenever it is pressed.
    def _on_press(self) -> None:
        self.clicks += 1

    # Define the `build` method. This method essentially tells Rio
    # what a ButtonClicker component looks like. Whenever the state
    # of the ButtonClicker component changes, Rio will call its
    # `build` method and update the GUI according to the output.
    def build(self) -> rio.Component:
        return rio.Column(
            rio.Button('Click me', on_press=self._on_press),
            rio.Text(f'You clicked the button {self.clicks} time(s)'),
        )

# Create an App and tell it to display a ButtonClicker when it starts
app = rio.App(build=ButtonClicker)
app.run_in_browser()  # Or `app.run_in_window()` to run as local app!
```

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

### Python Common Imports

Source: https://github.com/rio-labs/rio/blob/main/CLAUDE.md

Lists common and recommended imports for Python projects, including standard library modules and type hinting extensions.

```python
from __future__ import annotations  # Always first

from datetime import datetime, timezone, timedelta
from pathlib import Path

import typing as t
import typing_extensions as te
import numpy as np
import pandas as pd
```

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

### Snippet Directory Structure

Source: https://github.com/rio-labs/rio/blob/main/rio/snippets/README.md

Illustrates the required directory structure for organizing Rio code snippets. Snippets are grouped by subdirectory names within `snippet-files`.

```text
snippet-files
└── group
    ├── foo.py
    ├── bar.py
    └── baz.py
```

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

### Python Import Convention: Module vs. Specific Function

Source: https://github.com/rio-labs/rio/blob/main/CONTRIBUTING.md

Prefer importing entire modules and accessing their members with the module name. This avoids naming conflicts and clarifies the origin of functions.

```python
# Do this
import traceback
traceback.print_exc()

# Not this
from traceback import print_exc
print_exc()

# Or this
import traceback as tb
tb.print_exc()
```

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

### Format TypeScript Code

Source: https://github.com/rio-labs/rio/blob/main/CLAUDE.md

Formats TypeScript code using prettier. Ensure this is run on any TypeScript changes in the frontend directory.

```bash
npx prettier --write frontend/
```

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

### Python Import Convention: Common and Special Imports

Source: https://github.com/rio-labs/rio/blob/main/CONTRIBUTING.md

Exceptions to the general import rule for commonly used modules, types, and functions, as well as project-specific imports.

```python
# These are fine, and encouraged
from __future__ import annotations

from datetime import datetime, timezone, timedelta
from pathlib import Path

import typing as t
import typing_extensions as te

import numpy as np
import pandas as pd
import polars as pl

# In Rio projects specifically
import components as comps
```

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

### Run Specific Python Test File

Source: https://github.com/rio-labs/rio/blob/main/CLAUDE.md

Executes a specific Python test file using pytest. Useful for targeted testing.

```bash
uv run pytest tests/test_components.py
```

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

### Lint Python Code

Source: https://github.com/rio-labs/rio/blob/main/CLAUDE.md

Lints Python code using ruff to check for style and potential errors. Run regularly during development.

```bash
python -m ruff check .
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.