Rio

https://rio.dev/docs
Admin
Rio is a Python framework for building modern web and app applications with Material Design 3...
Tokens:144,833
Snippets:1,424
Trust Score:6.9
Update:3 months ago
Show doc for...
Tokens:
Raw
### Minimal FlowContainer layout example

Source: https://rio.dev/docs/api/flowcontainer

Demonstrates a basic FlowContainer setup with two text children that reflow based on window size.

```python
rio.FlowContainer(
    rio.Text("Hello"),
    rio.Text("World!"),
    column_spacing=1,
)
```

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

### Display a basic SimpleListItem

Source: https://rio.dev/docs/api/simplelistitem

A minimal example showing how to instantiate a SimpleListItem with text and a key.

```python
rio.SimpleListItem("Click me!", key="item1")
```

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

### Run Rio App as Web Server

Source: https://rio.dev/docs/api/app

Start a synchronous web server to host the Rio application.

```python
app = rio.App(
    name="My App",
    build=MyAppRoot,
)

app.run_as_web_server()
```

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

### Spawn Custom Dialog Example

Source: https://rio.dev/docs/api/session

Demonstrates spawning a modal dialog with a dropdown menu and waiting for a user selection.

```python
class MyComponent(rio.Component):
    value: str = "Vanilla"

    async def _create_dialog(self, options: list[str]) -> str | None:
        # This function will be called to create the dialog's content.
        # It builds up a UI using Rio components, just like a regular
        # `build` function would.
        def build_dialog_content() -> rio.Component:
            # Build the dialog
            return rio.Card(
                rio.Column(
                    rio.Text(
                        "Which ice cream would you like?",
                        align_x=0.5,
                    ),
                    rio.Dropdown(
                        label="ice cream",
                        options=options,
                        selected_value=self.value,
                        on_change=on_value_change,
                    ),
                    spacing=1,
                    margin=2,
                ),
                align_x=0.5,
                align_y=0.5,
            )

        async def on_value_change(event: rio.DropdownChangeEvent) -> None:
            # This function will be called whenever the user selects an
            # Item. It simply closes the dialog with the selected value.
            await dialog.close(event.value)

        # Show the dialog
        dialog = await self.session.show_custom_dialog(
            build=build_dialog_content,
            # Prevent the user from interacting with the rest of the app
            # while the dialog is open
            modal=True,
            # Don't close the dialog if the user clicks outside of it
            user_closable=False,
        )

        # Wait for the user to select an option
        result = await dialog.wait_for_close()

        # Return the selected value
        return result

    async def on_spawn_dialog(self) -> None:
        # Show a dialog and wait for the user to make a choice
        value = await self._create_dialog(
            options=["Vanilla", "Chocolate", "Strawberry"],
        )

        # Store the value, but only if one was selected. If the dialog
        # gets closed without a selection, `value` will be `None`.
        if value is not None:
            self.value = value

    def build(self) -> rio.Component:
        return rio.Column(
            rio.Button(
                "Open Dialog",
                on_press=self.on_spawn_dialog,
            ),
            rio.Text(f"You've chosen: {self.value}"),
            spacing=1,
            align_x=0.5,
            align_y=0.5,
        )
```

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

### Run a Rio App as a Web Server

Source: https://rio.dev/docs/api/app

Start the application as a web server to serve users over HTTP.

```python
app.run_as_web_server()
```

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

### Display a basic SeparatorListItem

Source: https://rio.dev/docs/api/separatorlistitem

A minimal example showing how to instantiate a separator list item.

```python
rio.SeparatorListItem()
```

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

### Basic Component Input Structure

Source: https://rio.dev/docs/howto/attribute-bindings

Initial setup showing a component with a text attribute that lacks input synchronization.

```python
class MyComponent(rio.Component):
    user_name: str = 'John'

    def build(self) -> rio.Component:
        return rio.Column(
            # Output is easy
            rio.Text(f'Your name is: {self.user_name}'),
            # But how do we get input?
            rio.TextInput()
        )
```

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

### Run the Docker Container

Source: https://rio.dev/docs/howto/deployment-in-docker

Command to start the container and map the host port 8000 to the container port 80.

```bash
docker run -p 8000:80 my-rio-app
```

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

### Minimal ThemeContextSwitcher Implementation

Source: https://rio.dev/docs/api/themecontextswitcher

A basic usage example of the ThemeContextSwitcher component with a button.

```python
rio.ThemeContextSwitcher(
    content=rio.Button("Button"),
    color="secondary",
)
```

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

### Run Rio App in Browser

Source: https://rio.dev/docs/api/app

Start a web server and automatically open the application in the default browser.

```python
app = rio.App(
    name="My App",
    build=MyAppRoot,
)

app.run_in_browser()
```

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

### Complete Persistent Settings Implementation

Source: https://rio.dev/docs/howto/persistent-settings

A full example demonstrating how to integrate persistent settings into a Rio component using a dropdown menu.

```python
import rio

class MyUserSettings(rio.UserSettings):
    language: str = "en"


class MyRoot(rio.Component):
    def on_change_language(self, event: rio.DropdownChangeEvent) -> None:
        # Get the settings
        settings = self.session[MyUserSettings]

        # Update them
        settings.language = event.value

        # Re-attach to save the changes
        self.session.attach(settings)

    def build(self) -> rio.Component:
        settings = self.session[MyUserSettings]

        return rio.Dropdown(
            label="Language",
            options=["en", "de", "fr", "es"],
            selected_value=settings.language,
            on_change=self.on_change_language,
            min_width=20,
            align_x=0.5,
            align_y=0.5,
        )


app = rio.App(
    build=MyRoot,
    default_attachments=[
        MyUserSettings(),
    ],
)
```

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

### Define a Counter Component

Source: https://rio.dev/docs/howto/component-lifecycle

A basic component example demonstrating the build method and state updates.

```python
class Counter(rio.Component):
    value: int = 0

    def on_press(self):
        self.count += 1

    def build(self):
        return rio.Column(
            # A text to display the current value
            rio.Text(
                str(self.value),
                justify="center"
            ),
            # And a button to bump the value
            rio.Button(
                "Increment",
                on_press=self.on_press,
            ),
            align_x=0.5,
            align_y=0.5,
        )
```

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

### Run Rio App in Release Mode

Source: https://rio.dev/docs/howto/deployment

Starts the Rio application on a specific port in release mode for improved performance and safety. Do not use the --public flag when deploying behind a reverse proxy.

```bash
rio run --port 8000 --release
```

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

### Initialize a Website component in Python

Source: https://rio.dev/docs/api/website

Creates a new website instance pointing to a specified URL. Ensure the URL is provided as a valid rio.URL object.

```python
rio.Website(
    url=rio.URL("https://www.example.com"),
)
```

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

### Initialize Website Component

Source: https://rio.dev/docs/api/website

Constructor signature for the Website component, including layout and accessibility parameters.

```python
Website(
    url: rio.URL, 
    *, 
    # Inherited from `rio.Component`
    key: str | int | None = None, 
    min_width: float = 0, 
    min_height: float = 0, 
    grow_x: bool = False, 
    grow_y: bool = False, 
    align_x: float | None = None, 
    align_y: float | None = None, 
    margin_left: float | None = None, 
    margin_top: float | None = None, 
    margin_right: float | None = None, 
    margin_bottom: float | None = None, 
    margin_x: float | None = None, 
    margin_y: float | None = None, 
    margin: float | None = None, 
    accessibility_role: Literal['alert', 'alertdialog', 'application', 'article', 'banner', 'button', 'cell', 'checkbox', 'columnheader', 'combobox', 'complementary', 'contentinfo', 'definition', 'dialog', 'directory', 'document', 'feed', 'figure', 'form', 'grid', 'gridcell', 'group', 'heading', 'img', 'link', 'list', 'listbox', 'listitem', 'log', 'main', 'marquee', 'math', 'menu', 'menubar', 'menuitem', 'menuitemcheckbox', 'menuitemradio', 'navigation', 'none', 'note', 'option', 'presentation', 'progressbar', 'radio', 'radiogroup', 'region', 'row', 'rowgroup', 'rowheader', 'scrollbar', 'search', 'searchbox', 'separator', 'slider', 'spinbutton', 'status', 'switch', 'tab', 'table', 'tablist', 'tabpanel', 'term', 'textbox', 'timer', 'toolbar', 'tooltip', 'tree', 'treegrid', 'treeitem'] | None = None, 
)
```

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

### Session.get_clipboard

Source: https://rio.dev/docs/api/session

Gets the current text from the client's clipboard.

```APIDOC
## Session.get_clipboard

### Description
Attempts to read the current text from the client's clipboard. Note that this operation can fail if running as a website and the user does not grant special permissions.

### Signature
`async def get_clipboard() -> str | None`
```

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

### App Execution Methods

Source: https://rio.dev/docs/api/app

Methods to start the Rio application in different environments.

```APIDOC
## app.run_in_window()

### Description
Runs the application as a local desktop application in a window.

## app.run_as_web_server()

### Description
Starts the application as a web server.

## app.as_fastapi()

### Description
Converts the Rio application into a FastAPI object, allowing it to be integrated into existing FastAPI projects or started with external tools like uvicorn.
```

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

### Use a Generic Function

Source: https://rio.dev/docs/api/switcherbaritem

Example of using a generic function with type parameters.

```python
def lookup_name[KT, VT](mapping: Mapping[KT, VT], key: KT, default: VT) -> VT:
    try:
        return mapping[key]
    except KeyError:
        return default
```

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

### Minimal Column example

Source: https://rio.dev/docs/api/column

Displays a Column containing two text components.

```python
rio.Column(rio.Text("Hello"), rio.Text("World!"))
```

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

### App.run_as_web_server

Source: https://rio.dev/docs/api/app

Creates and runs a webserver that serves the Rio app synchronously.

```APIDOC
## App.run_as_web_server

### Description
Creates and immediately runs a webserver that serves this app. This method will synchronously block until the server is shut down.

### Signature
`def run_as_web_server(*, host: str = 'localhost', port: int = 8000, quiet: bool = False, base_url: rio.URL | str | None = None) -> None`

### Parameters
- **host** (str) - Optional - Which IP address to serve the webserver on.
- **port** (int) - Optional - Which port the webserver should listen to.
- **quiet** (bool) - Optional - If True, Rio won't send any routine messages to stdout.
- **base_url** (rio.URL | str | None) - Optional - The base URL at which the app will be served.
```

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

### Apply CursorStyle to a Component

Source: https://rio.dev/docs/api/cursorstyle

Example of applying a pointer cursor to a Rectangle component.

```python
rio.Rectangle(
    fill=rio.Color.WHITE,
    cursor=rio.CursorStyle.POINTER,
)
```

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

### Displaying code with CodeBlock

Source: https://rio.dev/docs/api/codeblock

An example of using the CodeBlock component to display a Python function.

```python
def fibonacci(n):
    "Returns a list of the first n Fibonacci numbers."
    
    if n <= 0:
        return []
    elif n == 1:
        return [0]
    elif n == 2:
        return [0, 1]
    
    fib_sequence = [0, 1]
    for i in range(2, n):
        next_number = fib_sequence[-1] + fib_sequence[-2]
        fib_sequence.append(next_number)
    
    return fib_sequence
```

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

### Initialize a Rio App

Source: https://rio.dev/docs/api/app

Create a new App instance by specifying the application name and the root component class.

```python
app = rio.App(
    name="My App",
    build=MyAppRoot,
)
```

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

### App Constructor Signature

Source: https://rio.dev/docs/api/app

Full parameter list for configuring the App instance, including lifecycle handlers and routing.

```python
App(
    *,
    build: Callable[[], rio.Component] | None = None,
    name: str | None = None,
    description: str | None = None,
    icon: pathlib.Path | PIL.Image.Image | rio.URL | bytes | None = None,
    pages: Iterable[rio.ComponentPage | rio.Redirect] | os.PathLike | str | None = None,
    on_app_start: rio.EventHandler[rio.App] = None,
    on_app_close: rio.EventHandler[rio.App] = None,
    on_session_start: rio.EventHandler[rio.Session] = None,
    on_session_close: rio.EventHandler[rio.Session] = None,
    default_attachments: Iterable[Any] = (),
    ping_pong_interval: int | float | datetime.timedelta = datetime.timedelta(seconds=50),
    assets_dir: str | os.PathLike | None = None,
    theme: rio.Theme | tuple[rio.Theme, rio.Theme] | None = None,
    build_connection_lost_message: Callable[[], rio.Component] = ...,
    meta_tags: dict[str, str] = {},
)
```

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

### Initialize a List

Source: https://rio.dev/docs/api/list

Constructor signature for creating a new List instance.

```python
List(items: Iterable[T] = ())
```

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

### Get asset URL

Source: https://rio.dev/docs/api/session

Retrieves the unique URL for a file located in the application's assets directory.

```python
def url_for_asset(asset: pathlib.Path) -> rio.URL
```

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

### Webview Constructor

Source: https://rio.dev/docs/api/webview

Initializes a new Webview component with content and layout configuration parameters.

```python
Webview(
    content: rio.URL | str, 
    *, 
    enable_pointer_events: bool = True, 
    resize_to_fit_content: bool = True, 
    # Inherited from `rio.Component`
    key: str | int | None = None, 
    min_width: float = 0, 
    min_height: float = 0, 
    grow_x: bool = False, 
    grow_y: bool = False, 
    align_x: float | None = None, 
    align_y: float | None = None, 
    margin_left: float | None = None, 
    margin_top: float | None = None, 
    margin_right: float | None = None, 
    margin_bottom: float | None = None, 
    margin_x: float | None = None, 
    margin_y: float | None = None, 
    margin: float | None = None, 
    accessibility_role: Literal['alert', 'alertdialog', 'application', 'article', 'banner', 'button', 'cell', 'checkbox', 'columnheader', 'combobox', 'complementary', 'contentinfo', 'definition', 'dialog', 'directory', 'document', 'feed', 'figure', 'form', 'grid', 'gridcell', 'group', 'heading', 'img', 'link', 'list', 'listbox', 'listitem', 'log', 'main', 'marquee', 'math', 'menu', 'menubar', 'menuitem', 'menuitemcheckbox', 'menuitemradio', 'navigation', 'none', 'note', 'option', 'presentation', 'progressbar', 'radio', 'radiogroup', 'region', 'row', 'rowgroup', 'rowheader', 'scrollbar', 'search', 'searchbox', 'separator', 'slider', 'spinbutton', 'status', 'switch', 'tab', 'table', 'tablist', 'tabpanel', 'term', 'textbox', 'timer', 'toolbar', 'tooltip', 'tree', 'treegrid', 'treeitem'] | None = None, 
)
```

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

### Website(url, *, key, min_width, min_height, grow_x, grow_y, align_x, align_y, ...)

Source: https://rio.dev/docs/api/website

Constructor for the Website component. Displays a website at the provided URL.

```APIDOC
## Website Constructor

### Description
Displays a website within your app. Note that this component is deprecated; use `Webview` instead.

### Parameters
- **url** (rio.URL) - Required - The URL of the website to display.
- **key** (str | int | None) - Optional - A unique identifier for the component.
- **min_width** (float) - Optional - The minimum horizontal space requested.
- **min_height** (float) - Optional - The minimum vertical space requested.
- **grow_x** (bool) - Optional - Whether the component should request all superfluous horizontal space.
- **grow_y** (bool) - Optional - Whether the component should request all superfluous vertical space.
- **align_x** (float | None) - Optional - Horizontal alignment (0 to 1).
- **align_y** (float | None) - Optional - Vertical alignment (0 to 1).
```

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

### Define a Generic Mapping Class

Source: https://rio.dev/docs/api/switcherbaritem

Example of declaring a generic class using Python 3.12+ syntax.

```python
class Mapping[KT, VT]:
    def __getitem__(self, key: KT) -> VT:
        ...
    # Etc.
```

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

### Get Clipboard Text

Source: https://rio.dev/docs/api/session

Retrieves text from the client's clipboard, which may fail if the user denies permission.

```python
async def get_clipboard() -> str | None
```

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

### Create a dynamic ListView

Source: https://rio.dev/docs/api/listview

Demonstrates building a ListView with dynamic content and adding items programmatically using a loop.

```python
import functools


class MyComponent(rio.Component):
    products: list[str] = ["Product 1", "Product 2", "Product 3"]

    def on_press_heading_list_item(self, product: str) -> None:
        print(f"Pressed {product}")

    def on_selection_change(self, selected_items) -> None:
        print(f"Selected keys: {selected_items}")

    def build(self) -> rio.Component:
        # First create the ListView
        result = rio.ListView(
            *[rio.SimpleListItem(text=p, key=p) for p in self.products],
            selection_mode="multiple",
            on_selection_change=self.on_selection_change,
        )

        # Then add the children one by one
        for product in self.products:
            result.add(
                rio.SimpleListItem(
                    text=product,
                    key=product,
                    # Note the use of `functools.partial` to pass the
                    # product to the event handler.
                    on_press=functools.partial(
                        self.on_press_heading_list_item,
                        product=product,
                    ),
                )
            )

        return result
```

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

### DragStartEvent

Source: https://rio.dev/docs/api/dragstartevent

The DragStartEvent class stores details about the mouse state and the target component at the moment a drag operation starts.

```APIDOC
## DragStartEvent

### Description
This dataclass holds information regarding a drag start event. It is typically received as an argument in `on_drag_start` event handlers.

### Attributes
- **button** (`rio.MouseButton`) - The mouse button that is held down while dragging.
- **x** (`float`) - The x coordinate of the mouse when the event was triggered, relative to the left side of the window.
- **y** (`float`) - The y coordinate of the mouse when the event was triggered, relative to the top of the window.
- **component** (`rio.Component`) - The component located under the mouse cursor when the event happened.
```

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

### Create a layered Stack of icons

Source: https://rio.dev/docs/api/stack

Demonstrates creating a stack of three icons with varying sizes and colors, layered from bottom to top.

```python
rio.Stack(
    # bottom
    rio.Icon(
        "material/castle",
        min_width=50,
        min_height=50,
        fill=rio.Color.from_hex("00ff00"),
        align_x=0.5,
        align_y=0.5,
    ),
    # middle
    rio.Icon(
        "material/castle",
        min_width=30,
        min_height=30,
        fill=rio.Color.from_hex("ff0000"),
        align_x=0.5,
        align_y=0.5,
    ),
    # top
    rio.Icon(
        "material/castle",
        min_width=10,
        min_height=10,
        fill=rio.Color.from_hex("000000"),
        align_x=0.5,
        align_y=0.5,
    ),
)
```

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

### Create and apply a custom theme

Source: https://rio.dev/docs/api/theme

Use Theme.from_colors to define a theme and pass it to the Rio App instance.

```python
# Create a new theme
theme = rio.Theme.from_colors(
    # Configure your theme here
)

# And apply it to your app
app = rio.App(
    theme=theme,
    # ...
)
```

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

### Grid Usage in Component Build

Source: https://rio.dev/docs/api/grid

Example of using a grid within a custom component's build method.

```python
class MyComponent(rio.Component):
    def build(self) -> rio.Component:
        grid = rio.Grid(row_spacing=1, column_spacing=1)
        grid.add(rio.Text("Hello"), row=0, column=0)
        grid.add(rio.Text("World!"), row=0, column=1)
        grid.add(rio.Text("Foo"), row=1, column=0)
        grid.add(rio.Text("Bar"), row=1, column=1)

        return grid
```

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

### Initialize Grid with List

Source: https://rio.dev/docs/api/grid

Create a grid layout by passing a list of rows containing child components.

```python
rio.Grid(
    [rio.Text("Hello"), rio.Text("World!")],  # 1. Row
    [rio.Text("Foo"), rio.Text("Bar")],  # 2. Row
)
```

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

### Expose project to the network

Source: https://rio.dev/docs/howto/run-project

Command to make the project accessible to other devices on the same network.

```bash
rio run --public
```

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

### Create a new Rio project

Source: https://rio.dev/docs/howto/project-setup

Use the rio new command to initialize a project structure. If the command is not found, use the python module execution syntax.

```bash
# Change into the directory where you want to create the new project
cd /path/to/your/projects

# Run the `rio new` command
rio new

# On some platforms, python packages aren't available right in the terminal. If
# the command above doesn't work, try one of the following:
python -m rio new
python3 -m rio new
py -m rio new
```

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

### Use Spacer in a Row

Source: https://rio.dev/docs/api/spacer

Example demonstrating how to use a Spacer to push two Text components to opposite ends of a Row.

```python
rio.Row(
    rio.Text("Hello"),
    rio.Spacer(),
    rio.Text("World"),
)
```

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

### Demonstrate Component Remounting in Rio

Source: https://rio.dev/docs/howto/component-lifecycle

Shows how a component can be conditionally added and removed from the component tree without being destroyed.

```python
class RemountDemo(rio.Component):
    child: rio.Component
    show_child: bool = True

    def build(self) -> rio.Component:
        column = rio.Column(
            rio.Switch(is_on=self.bind().show_child),
        )

        # Conditionally add the child. Because of this, the same child can be
        # added and removed multiple times, without ever being deleted.
        if self.show_child:
            column.add(self.child)
```

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

### Complex Column layout example

Source: https://rio.dev/docs/api/column

Arranges an icon and text components vertically within a Card, utilizing spacing and margin properties.

```python
class MyComponent(rio.Component):
    def build(self) -> rio.Component:
        return rio.Card(
            content=rio.Column(
                rio.Text("Hello"),
                rio.Icon("material/castle"),
                rio.Text("World!"),
                spacing=1,
                margin=1,
            ),
        )
```

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

### Define a Dockerfile for a Rio Application

Source: https://rio.dev/docs/howto/deployment-in-docker

A Dockerfile configuration using Python 3.12-slim and uv for dependency management. This setup assumes a pyproject.toml file is present in the project root.

```dockerfile
# Use the official Python image as a base. This ensures that typical Python
# dependencies are already installed in the container.
FROM python:3.12-slim

# Make port 8000 available to the outside world. This is the port Rio will run
# at
EXPOSE 8000

# Set environment variables to prevent Python from writing `.pyc` files and
# creating a buffer for stdout
ENV PYTHONUNBUFFERED=1 \
    PYTHONDONTWRITEBYTECODE=1

# Set the working directory in the container
WORKDIR /app

# Install the latest version of `uv`. `uv` is similar to `pip`, but much faster
# and supports additional commands we'll use below
COPY --from=ghcr.io/astral-sh/uv:latest /uv /uvx /bin/

# Docker caches the results of each RUN instruction. Whenever a container is
# rebuilt, Docker will avoid running any steps whose results are still valid
# from last time.
#
# To make sure the dependencies don't all have to be reinstalled every time you
# change a single line of code, we'll install them before adding the bulk of the
# project files.
#
# Some build tools, like `poetry` require the project's README file to be
# present for this step. If your file is named differently or you don't have one
# at all, update this line or add a file.
COPY pyproject.toml README.md /app/
RUN uv pip install -r pyproject.toml --system --pre

# Alternatively, if you're using a `requirements.txt` file instead of
# `pyproject.toml`, you can use the following commands instead:
#
# COPY requirements.txt /app
# RUN uv pip install -r requirements.txt --pre

# Now copy the remainder of the project. This way if anything in the project
# changes the dependencies don't have to be reinstalled.
COPY . /app

# This command will be run by docker once you run the container. It starts the
# Rio server in release mode, on port 8000. We also make the port publicly
# available, so that Docker can expose it to the outside world.
CMD ["python", "-m", "rio", "run", "--release", "--port=8000", "--public"]
```

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

### Initialize Icon Component

Source: https://rio.dev/docs/api/icon

Constructor definition for the Icon component, detailing available parameters for icon selection, styling, and layout.

```python
Icon(
    icon: str, 
    *, 
    fill: rio.SolidFill | rio.LinearGradientFill | rio.ImageFill | rio.Color | Literal['background', 'neutral', 'hud', 'primary', 'secondary', 'success', 'warning', 'danger', 'keep'] | Literal['dim'] = 'keep', 
    # Inherited from `rio.Component`
    key: str | int | None = None, 
    margin: float | None = None, 
    margin_x: float | None = None, 
    margin_y: float | None = None, 
    margin_left: float | None = None, 
    margin_top: float | None = None, 
    margin_right: float | None = None, 
    margin_bottom: float | None = None, 
    min_width: float = 1.3, 
    min_height: float = 1.3, 
    grow_x: bool = False, 
    grow_y: bool = False, 
    align_x: float | None = None, 
    align_y: float | None = None, 
    accessibility_role: Literal['alert', 'alertdialog', 'application', 'article', 'banner', 'button', 'cell', 'checkbox', 'columnheader', 'combobox', 'complementary', 'contentinfo', 'definition', 'dialog', 'directory', 'document', 'feed', 'figure', 'form', 'grid', 'gridcell', 'group', 'heading', 'img', 'link', 'list', 'listbox', 'listitem', 'log', 'main', 'marquee', 'math', 'menu', 'menubar', 'menuitem', 'menuitemcheckbox', 'menuitemradio', 'navigation', 'none', 'note', 'option', 'presentation', 'progressbar', 'radio', 'radiogroup', 'region', 'row', 'rowgroup', 'rowheader', 'scrollbar', 'search', 'searchbox', 'separator', 'slider', 'spinbutton', 'status', 'switch', 'tab', 'table', 'tablist', 'tabpanel', 'term', 'textbox', 'timer', 'toolbar', 'tooltip', 'tree', 'treegrid', 'treeitem'] | None = None, 
)
```

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

### Play media from a local path

Source: https://rio.dev/docs/api/mediaplayer

Initialize a MediaPlayer using a pathlib.Path object for local files.

```python
from pathlib import Path

rio.MediaPlayer(Path("example_video.mp4"))
```

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

### Html(html: str, *, enable_pointer_events: bool = True, ...)

Source: https://rio.dev/docs/api/html

Constructor for the Html component. Displays raw HTML content. If the HTML starts with '<!DOCTYPE ' or '<html', it is automatically rendered in an iframe.

```APIDOC
## Html Constructor

### Description
Displays raw HTML. The `Html` component allows you to embed arbitrary HTML in your app. It takes HTML code as input and renders it. If the HTML code starts with "<!DOCTYPE " or "<html", it is automatically displayed in an iframe.

### Parameters
- **html** (str) - Required - The HTML to render.
- **enable_pointer_events** (bool) - Optional - Whether the Html component (and its contents) are clickable. Defaults to True.
- **key** (str | int | None) - Optional - A unique identifier for this component.
- **min_width** (float) - Optional - The minimum amount of horizontal space this component should request.
- **min_height** (float) - Optional - The minimum amount of vertical space this component should request.
- **grow_x** (bool) - Optional - Whether this component should request all the superfluous horizontal space available in its parent.
- **grow_y** (bool) - Optional - Whether this component should request all the superfluous vertical space available in its parent.
- **align_x** (float | None) - Optional - How this component should be aligned horizontally (0 to 1).
- **align_y** (float | None) - Optional - How this component should be aligned vertically (0 to 1).
```

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

### Webview Constructor

Source: https://rio.dev/docs/api/webview

Initializes a new Webview component to display a URL or HTML content.

```APIDOC
## Webview(content, *, enable_pointer_events=True, resize_to_fit_content=True, ...)

### Description
Creates a component that displays a website or renders HTML. If the content starts with "<!DOCTYPE " or "<html", it is automatically rendered in an iframe.

### Parameters
- **content** (rio.URL | str) - Required - The URL of the website or the HTML content to render.
- **enable_pointer_events** (bool) - Optional - Whether the component and its contents are clickable. Defaults to True.
- **resize_to_fit_content** (bool) - Optional - Whether the component should automatically resize to match its content. Defaults to True.
- **key** (str | int | None) - Optional - A unique identifier for component reconciliation.
- **min_width** (float) - Optional - The minimum horizontal space requested.
- **min_height** (float) - Optional - The minimum vertical space requested.
- **grow_x** (bool) - Optional - Whether to request extra horizontal space.
- **grow_y** (bool) - Optional - Whether to request extra vertical space.
- **align_x** (float | None) - Optional - Horizontal alignment (0 to 1).
```

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

### Html Constructor

Source: https://rio.dev/docs/api/html

Initializes the Html component with raw HTML content and layout configuration.

```python
Html(
    html: str, 
    *, 
    enable_pointer_events: bool = True, 
    # Inherited from `rio.Component`
    key: str | int | None = None, 
    min_width: float = 0, 
    min_height: float = 0, 
    grow_x: bool = False, 
    grow_y: bool = False, 
    align_x: float | None = None, 
    align_y: float | None = None, 
    margin_left: float | None = None, 
    margin_top: float | None = None, 
    margin_right: float | None = None, 
    margin_bottom: float | None = None, 
    margin_x: float | None = None, 
    margin_y: float | None = None, 
    margin: float | None = None, 
    accessibility_role: Literal['alert', 'alertdialog', 'application', 'article', 'banner', 'button', 'cell', 'checkbox', 'columnheader', 'combobox', 'complementary', 'contentinfo', 'definition', 'dialog', 'directory', 'document', 'feed', 'figure', 'form', 'grid', 'gridcell', 'group', 'heading', 'img', 'link', 'list', 'listbox', 'listitem', 'log', 'main', 'marquee', 'math', 'menu', 'menubar', 'menuitem', 'menuitemcheckbox', 'menuitemradio', 'navigation', 'none', 'note', 'option', 'presentation', 'progressbar', 'radio', 'radiogroup', 'region', 'row', 'rowgroup', 'rowheader', 'scrollbar', 'search', 'searchbox', 'separator', 'slider', 'spinbutton', 'status', 'switch', 'tab', 'table', 'tablist', 'tabpanel', 'term', 'textbox', 'timer', 'toolbar', 'tooltip', 'tree', 'treegrid', 'treeitem'] | None = None, 
)
```

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

### Basic Drawer Implementation

Source: https://rio.dev/docs/api/drawer

A simple implementation of a drawer using a button as the anchor and text as the content.

```python
rio.Drawer(
    anchor=rio.Button("Click Me!"),
    content=rio.Text("It was clickbait!"),
)
```

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

### Create a basic Container

Source: https://rio.dev/docs/api/container

Displays a container with text content and a specified margin.

```python
rio.Container(
    rio.Text("Hello World!"),
    margin=2,
)
```

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

### Create a simple table

Source: https://rio.dev/docs/api/table

Initializes a basic table component with provided data.

```python
rio.Table(
    data={
        "Name": ["Alice", "Bob", "Charlie"],
        "Age": [25, 30, 35],
        "City": ["New York", "San Francisco", "Los Angeles"],
    }
)
```

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

### Implement custom initialization with __post_init__

Source: https://rio.dev/docs/api/component

Use the __post_init__ method to execute custom logic after component construction. Avoid overriding __init__ to maintain dataclass functionality.

```python
class HelloComponent(rio.Component):
    name: str
    greeting: str = ""

    # In order to run custom code during initialization, create a
    # `__post_init__` method. This method is called after all internal
    # setup is done, so you are free to access your finished component.
    def __post_init__(self) -> None:
        # If the caller hasn't provided a greeting, we'll make one up
        # based on the connected user's language
        if self.greeting:
            return

        if self.session.preferred_languages[0].startswith("de"):
            self.greeting = "Hallo"
        elif self.session.preferred_languages[0].startswith("es"):
            self.greeting = "Hola"
        elif self.session.preferred_languages[0].startswith("fr"):
            self.greeting = "Bonjour"
        else:
            self.greeting = "Hello"

    def build(self) -> rio.Component:
        return rio.Text(f"{self.greeting}, {self.name}!")
```

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

### Create and apply a theme pair

Source: https://rio.dev/docs/api/theme

Use pair_from_colors to generate light and dark themes that automatically switch based on system preferences.

```python
# Create a theme pair
themes = rio.Theme.pair_from_colors(
    # Configure your theme here
)

# And apply them to your app
app = rio.App(
    theme=themes,
    # ...
)
```

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

### Initialize Tooltip Component

Source: https://rio.dev/docs/api/tooltip

Constructor definition for the Tooltip component, including anchor, content, and layout configuration parameters.

```python
Tooltip(
    anchor: rio.Component, 
    tip: str | rio.Component, 
    position: Literal['auto', 'left', 'top', 'right', 'bottom'] = 'auto', 
    *, 
    gap: float = 0.5, 
    # Inherited from `rio.Component`
    key: str | int | None = None, 
    margin: float | None = None, 
    margin_x: float | None = None, 
    margin_y: float | None = None, 
    margin_left: float | None = None, 
    margin_top: float | None = None, 
    margin_right: float | None = None, 
    margin_bottom: float | None = None, 
    min_width: float = 0, 
    min_height: float = 0, 
    grow_x: bool = False, 
    grow_y: bool = False, 
    align_x: float | None = None, 
    align_y: float | None = None, 
    accessibility_role: Literal['alert', 'alertdialog', 'application', 'article', 'banner', 'button', 'cell', 'checkbox', 'columnheader', 'combobox', 'complementary', 'contentinfo', 'definition', 'dialog', 'directory', 'document', 'feed', 'figure', 'form', 'grid', 'gridcell', 'group', 'heading', 'img', 'link', 'list', 'listbox', 'listitem', 'log', 'main', 'marquee', 'math', 'menu', 'menubar', 'menuitem', 'menuitemcheckbox', 'menuitemradio', 'navigation', 'none', 'note', 'option', 'presentation', 'progressbar', 'radio', 'radiogroup', 'region', 'row', 'rowgroup', 'rowheader', 'scrollbar', 'search', 'searchbox', 'separator', 'slider', 'spinbutton', 'status', 'switch', 'tab', 'table', 'tablist', 'tabpanel', 'term', 'textbox', 'timer', 'toolbar', 'tooltip', 'tree', 'treegrid', 'treeitem'] | None = 'tooltip', 
)
```

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

### MediaPlayer Constructor

Source: https://rio.dev/docs/api/mediaplayer

Initializes a new MediaPlayer instance with configuration for media source, playback behavior, and layout properties.

```python
MediaPlayer(
    media: pathlib.Path | rio.URL | bytes, 
    *, 
    media_type: str | None = None, 
    loop: bool = False, 
    autoplay: bool = False, 
    controls: bool = True, 
    muted: bool = False, 
    volume: float = 1.0, 
    background: rio.SolidFill | rio.LinearGradientFill | rio.RadialGradientFill | rio.ImageFill | rio.FrostedGlassFill | rio.Color = <Color #000000ff>, 
    on_playback_end: rio.EventHandler[[]] = None, 
    on_error: rio.EventHandler[[]] = None, 
    # Inherited from `rio.Component`
    key: str | int | None = None, 
    margin: float | None = None, 
    margin_x: float | None = None, 
    margin_y: float | None = None, 
    margin_left: float | None = None, 
    margin_top: float | None = None, 
    margin_right: float | None = None, 
    margin_bottom: float | None = None, 
    min_width: float = 0, 
    min_height: float = 0, 
    grow_x: bool = False, 
    grow_y: bool = False, 
    align_x: float | None = None, 
    align_y: float | None = None, 
    accessibility_role: Literal['alert', 'alertdialog', 'application', 'article', 'banner', 'button', 'cell', 'checkbox', 'columnheader', 'combobox', 'complementary', 'contentinfo', 'definition', 'dialog', 'directory', 'document', 'feed', 'figure', 'form', 'grid', 'gridcell', 'group', 'heading', 'img', 'link', 'list', 'listbox', 'listitem', 'log', 'main', 'marquee', 'math', 'menu', 'menubar', 'menuitem', 'menuitemcheckbox', 'menuitemradio', 'navigation', 'none', 'note', 'option', 'presentation', 'progressbar', 'radio', 'radiogroup', 'region', 'row', 'rowgroup', 'rowheader', 'scrollbar', 'search', 'searchbox', 'separator', 'slider', 'spinbutton', 'status', 'switch', 'tab', 'table', 'tablist', 'tabpanel', 'term', 'textbox', 'timer', 'toolbar', 'tooltip', 'tree', 'treegrid', 'treeitem'] | None = None, 
)
```

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

### rio.App Constructor

Source: https://rio.dev/docs/api/app

Initializes a new Rio application instance with configuration for pages, metadata, and lifecycle events.

```APIDOC
## rio.App Constructor

### Description
Initializes the application configuration, including the root component, app name, icon, and lifecycle event handlers.

### Signature
```python
rio.App(
    *, 
    build: Callable[[], rio.Component] | None = None, 
    name: str | None = None, 
    description: str | None = None, 
    icon: pathlib.Path | PIL.Image.Image | rio.URL | bytes | None = None, 
    pages: Iterable[rio.ComponentPage | rio.Redirect] | os.PathLike | str | None = None, 
    on_app_start: rio.EventHandler[rio.App] = None, 
    on_app_close: rio.EventHandler[rio.App] = None, 
    on_session_start: rio.EventHandler[rio.Session] = None, 
    on_session_close: rio.EventHandler[rio.Session] = None, 
    default_attachments: Iterable[Any] = (), 
    ping_pong_interval: int | float | datetime.timedelta = datetime.timedelta(seconds=50), 
    assets_dir: str | os.PathLike | None = None, 
    theme: rio.Theme | tuple[rio.Theme, rio.Theme] | None = None, 
    build_connection_lost_message: Callable[[], rio.Component] = ..., 
    meta_tags: dict[str, str] = {}
)
```
```

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

### Initialize SolidFill

Source: https://rio.dev/docs/api/solidfill

Constructor for creating a SolidFill instance with a specified color.

```python
SolidFill(color: rio.Color)
```

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

### Create and Initialize Colors in Python

Source: https://rio.dev/docs/api/color

Use factory methods to create colors from different color spaces. Direct instantiation of the Color class will raise a RuntimeError.

```python
# Color from RGB(A)
Color.from_rgb(1.0, 0.0, 0.0, 1.0)

# Color from hex
Color.from_hex("#ff0000")

# Color from HSV(A)
Color.from_hsv(0.0, 1.0, 1.0, 1.0)

# Color from grayscale
Color.from_gray(0.5, 1.0)

# Invalid: Don't call `Color` directly
Color(1.0, 0.0, 0.0, 1.0)  # Raises a `RuntimeError`
```

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

### Initialize Dict

Source: https://rio.dev/docs/api/dict

The constructor accepts keyword arguments to initialize the dictionary.

```python
Dict(**kwargs: V)
```

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

### Implement Rio component type hints

Source: https://rio.dev/docs/howto/type-hints

Demonstrates the mandatory use of type hints for component attributes in Rio, alongside optional hints for methods.

```python
class MyComponent(rio.Component):
    # Notice the type hint here. This is **required** for the component to
    # function
    label: str = 'Click Me!'

    # It's good practice to add type hints to methods as well, but this is not
    # required.
    async def on_button_press(self) -> None:
        self.label = 'Button Pressed!'

    # Same here. Nice, but not necessary.
    def build(self) -> rio.Component:
        return rio.Button(
            self.label,
            on_press=self.on_button_press,
        )
```
Tokens:
Raw