Mesop

https://mesop-dev.github.io/mesop
Admin
Mesop is a Python-native framework for rapidly building AI web applications without frontend...
Tokens:79,382
Snippets:853
Trust Score:8.3
Update:2 months ago
Show doc for...
Tokens:
Raw
### Run Mesop Development Server

Source: https://mesop-dev.github.io/mesop/internal/codespaces

Execute this command in the terminal after the Codespace setup is complete to start the Mesop development server. This may take some time on the first run.

```bash
./scripts/cli.sh

```

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

### Define Example Prompts for Home Page

Source: https://mesop-dev.github.io/mesop/codelab/5

Defines a list of example prompts and a function to render them as clickable boxes. Clicking an example sets the input state to the example text.

```python
EXAMPLES = [
    "Create a file-lock in Python",
    "Write an email to Congress to have free milk for all",
    "Make a nice box shadow in CSS",
]

def examples_row():
    with me.box(
        style=me.Style(
            display="flex", flex_direction="row", gap=16, margin=me.Margin(bottom=24)
        )
    ):
        for i in EXAMPLES:
            example(i)

def example(text: str):
    with me.box(
        key=text,
        on_click=click_example,
        style=me.Style(
            cursor="pointer",
            background="#b9e1ff",
            width="215px",
            height=160,
            font_weight=500,
            line_height="1.5",
            padding=me.Padding.all(16),
            border_radius=16,
            border=me.Border.all(me.BorderSide(width=1, color="blue", style="none")),
        ),
    ):
        me.text(text)

def click_example(e: me.ClickEvent):
    state = me.state(State)
    state.input = e.key
```

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

### Install Mesop

Source: https://mesop-dev.github.io/mesop/getting-started/installing

Install the Mesop package using pip. This is the primary installation command.

```bash
pip install mesop

```

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

### Setup Proto Python Modules

Source: https://mesop-dev.github.io/mesop/internal/development

Sets up a symlink required for Python IDE support for protos.

```bash
./scripts/setup_proto_py_modules.sh

```

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

### Install Project Dependencies

Source: https://mesop-dev.github.io/mesop/codelab

Install the project dependencies using pip.

```bash
pip install -r requirements.txt
```

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

### Scroll into view example

Source: https://mesop-dev.github.io/mesop/api/commands/scroll-into-view

Demonstrates using me.scroll_into_view to navigate to specific components by key, including handling dynamic content updates.

```python
import time

import mesop as me


@me.stateclass
class State:
  more_lines: int = 0


@me.page(path="/scroll_into_view")
def app():
  me.button("Scroll to middle line", on_click=scroll_to_middle)
  me.button("Scroll to bottom line", on_click=scroll_to_bottom)
  me.button(
    "Scroll to bottom line & generate lines",
    on_click=scroll_to_bottom_and_generate_lines,
  )
  for _ in range(100):
    me.text("Filler line")
  me.text("middle_line", key="middle_line")
  for _ in range(100):
    me.text("Filler line")
  me.text("bottom_line", key="bottom_line")
  for _ in range(me.state(State).more_lines):
    me.text("More lines")


def scroll_to_middle(e: me.ClickEvent):
  me.scroll_into_view(key="middle_line")


def scroll_to_bottom(e: me.ClickEvent):
  me.scroll_into_view(key="bottom_line")


def scroll_to_bottom_and_generate_lines(e: me.ClickEvent):
  state = me.state(State)
  me.scroll_into_view(key="bottom_line")
  yield
  state.more_lines += 5
  time.sleep(1)
  yield
  state.more_lines += 5
  time.sleep(1)
  yield
  state.more_lines += 5
  time.sleep(1)
  yield
  state.more_lines += 5
  time.sleep(1)
  yield
```

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

### Simple Event Handler Example

Source: https://mesop-dev.github.io/mesop/guides/event-handlers

A basic example demonstrating a button click that increments a counter stored in the application state.

```python
def counter():
    me.button("Increment", on_click=on_click)

def on_click(event: me.ClickEvent):
    state = me.state(State)
    state.count += 1

@me.stateclass
class State:
    count: int = 0
```

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

### Install Pre-commit Hooks

Source: https://mesop-dev.github.io/mesop/internal/development

Installs pre-commit hooks for the repository to automatically format and lint code before committing.

```bash
pre-commit install

```

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

### Implement Text to Text Transformation

Source: https://mesop-dev.github.io/mesop/components/text-to-text

Demonstrates the basic setup of the text_to_text component using a simple transformation function.

```python
import mesop as me
import mesop.labs as mel


def load(e: me.LoadEvent):
  me.set_theme_mode("system")


@me.page(
  on_load=load,
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://mesop-dev.github.io"]
  ),
  path="/text_to_text",
  title="Text to Text Example",
)
def app():
  mel.text_to_text(
    upper_case_stream,
    title="Text to Text Example",
  )


def upper_case_stream(s: str):
  return "Echo: " + s.capitalize()
```

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

### Install Third-Party Dependencies

Source: https://mesop-dev.github.io/mesop/internal/development

Installs third-party dependencies using pip. You may need to run with `sudo` if permission errors occur.

```bash
pip install -r build_defs/requirements_lock.txt

```

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

### Focus Component Example

Source: https://mesop-dev.github.io/mesop/api/commands/focus-component

Demonstrates using me.focus_component within an event handler to focus on various UI components based on a selection change.

```python
import mesop as me


@me.page(path="/focus_component")
def page():
  with me.box(style=me.Style(margin=me.Margin.all(15))):
    me.select(
      options=[
        me.SelectOption(label="Autocomplete", value="autocomplete"),
        me.SelectOption(label="Checkbox", value="checkbox"),
        me.SelectOption(label="Input", value="input"),
        me.SelectOption(label="Link", value="link"),
        me.SelectOption(label="Radio", value="radio"),
        me.SelectOption(label="Select", value="select"),
        me.SelectOption(label="Slider", value="slider"),
        me.SelectOption(label="Slide Toggle", value="slide_toggle"),
        me.SelectOption(label="Textarea", value="textarea"),
        me.SelectOption(label="Uploader", value="uploader"),
      ],
      on_selection_change=on_selection_change,
    )

  me.divider()

  with me.box(
    style=me.Style(
      display="grid",
      gap=5,
      grid_template_columns="1fr 1fr",
      margin=me.Margin.all(15),
    )
  ):
    with me.box():
      me.autocomplete(
        key="autocomplete",
        label="Autocomplete",
        options=[
          me.AutocompleteOption(label="Test", value="Test"),
          me.AutocompleteOption(label="Test2", value="Tes2t"),
        ],
      )

    with me.box():
      me.checkbox("Checkbox", key="checkbox")

    with me.box():
      me.input(key="input", label="Input")

    with me.box():
      me.link(key="link", text="Test", url="https://google.com")

    with me.box():
      me.radio(
        key="radio",
        options=[
          me.RadioOption(label="Option 1", value="1"),
          me.RadioOption(label="Option 2", value="2"),
        ],
      )

    with me.box():
      me.select(
        key="select",
        label="Select",
        options=[
          me.SelectOption(label="label 1", value="value1"),
          me.SelectOption(label="label 2", value="value2"),
          me.SelectOption(label="label 3", value="value3"),
        ],
      )

    with me.box():
      me.slider(key="slider")

    with me.box():
      me.slide_toggle(key="slide_toggle", label="Slide toggle")

    with me.box():
      me.textarea(key="textarea", label="Textarea")

    with me.box():
      me.uploader(
        key="uploader",
        label="Upload Image",
        accepted_file_types=["image/jpeg", "image/png"],
        type="flat",
        color="primary",
        style=me.Style(font_weight="bold"),
      )


def on_selection_change(e: me.SelectSelectionChangeEvent):
  me.focus_component(key=e.value)
```

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

### Start Python Debug Server

Source: https://mesop-dev.github.io/mesop/guides/debugging

Include this snippet at the top of your Mesop app to start a debug server that VS Code can attach to.

```python
import debugpy

debugpy.listen(5678)

```

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

### Autocomplete Component Implementation

Source: https://mesop-dev.github.io/mesop/components/autocomplete

A full example showing how to define state, handle autocomplete events, and generate grouped options for the autocomplete component.

```python
import mesop as me


@me.stateclass
class State:
  raw_value: str
  selected_value: str = "California"


def load(e: me.LoadEvent):
  me.set_theme_mode("system")


@me.page(
  on_load=load,
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://mesop-dev.github.io"]
  ),
  path="/autocomplete",
)
def app():
  state = me.state(State)

  with me.box(style=me.Style(margin=me.Margin.all(15))):
    me.autocomplete(
      label="Select state",
      value=state.selected_value,
      options=_make_autocomplete_options(),
      on_selection_change=on_value_change,
      on_enter=on_value_change,
      on_input=on_input,
      appearance="outline",
    )

    if state.selected_value:
      me.text("Selected: " + state.selected_value)


def on_value_change(
  e: me.AutocompleteEnterEvent | me.AutocompleteSelectionChangeEvent,
):
  state = me.state(State)
  state.selected_value = e.value


def on_input(e: me.InputEvent):
  state = me.state(State)
  state.raw_value = e.value


def _make_autocomplete_options() -> list[me.AutocompleteOptionGroup]:
  """Creates and filter autocomplete options.

  The states list assumed to be alphabetized and we group by the first letter of the
  state's name.
  """
  states_options_list = []
  sub_group = None
  for state in _STATES:
    if not sub_group or sub_group.label != state[0]:
      if sub_group:
        states_options_list.append(sub_group)
      sub_group = me.AutocompleteOptionGroup(label=state[0], options=[])
    sub_group.options.append(me.AutocompleteOption(label=state, value=state))
  if sub_group:
    states_options_list.append(sub_group)
  return states_options_list


_STATES = [
  "Alabama",
  "Alaska",
  "Arizona",
  "Arkansas",
  "California",
  "Colorado",
  "Connecticut",
  "Delaware",
  "Florida",
  "Georgia",
  "Hawaii",
  "Idaho",
  "Illinois",
  "Indiana",
  "Iowa",
  "Kansas",
  "Kentucky",
  "Louisiana",
  "Maine",
  "Maryland",
  "Massachusetts",
  "Michigan",
  "Minnesota",
  "Mississippi",
  "Missouri",
  "Montana",
  "Nebraska",
  "Nevada",
  "New Hampshire",
  "New Jersey",
  "New Mexico",
  "New York",
  "North Carolina",
  "North Dakota",
  "Ohio",
  "Oklahoma",
  "Oregon",
  "Pennsylvania",
  "Rhode Island",
  "South Carolina",
  "South Dakota",
  "Tennessee",
  "Texas",
  "Utah",
  "Vermont",
  "Virginia",
  "Washington",
  "West Virginia",
  "Wisconsin",
  "Wyoming",
]
```

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

### Run Docker Compose

Source: https://mesop-dev.github.io/mesop/guides/deployment

Command to start Mesop application services defined in docker-compose.yaml in detached mode.

```bash
docker-compose up -d

```

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

### SQLAlchemy Table Setup for Mesop State Sessions

Source: https://mesop-dev.github.io/mesop/api/config

Sets up a SQLAlchemy table for storing Mesop state sessions. Ensure `TABLE_NAME` matches `MESOP_STATE_SESSION_BACKEND_SQL_TABLE` if overridden.

```python
TABLE_NAME = "mesop_state_session"

db = create_engine(CONNECTION_URI)
metadata = MetaData()
table = Table(
  TABLE_NAME,
  metadata,
  Column("token", String(23), primary_key=True),
  Column("states", LargeBinary, nullable=False),
  Column("created_at", DateTime, nullable=False, index=True),
)

metadata.create_all(db)
```

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

### Navigate Between Mesop Pages with Button

Source: https://mesop-dev.github.io/mesop/guides/multi-pages

Implement navigation to another page when a button is clicked using me.navigate. This example demonstrates sharing state across pages.

```python
import mesop as me


def on_click(e: me.ClickEvent):
  state = me.state(State)
  state.count += 1
  me.navigate("/multi_page_nav/page_2")


@me.page(path="/multi_page_nav")
def main_page():
  me.button("Navigate to Page 2", on_click=on_click)


@me.page(path="/multi_page_nav/page_2")
def page_2():
  state = me.state(State)
  me.text(f"Page 2 - count: {state.count}")


@me.stateclass
class State:
  count: int

```

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

### Mesop Starter Kit App Code

Source: https://mesop-dev.github.io/mesop/getting-started/quickstart

This Python code defines a simple interactive Mesop application. It includes state management for input and output, UI components for displaying text, clickable examples, a chat input area, and a streaming output section. It also includes a placeholder for an API call.

```python
import time

import mesop as me


@me.stateclass
class State:
  input: str
  output: str
  in_progress: bool


@me.page(path="/starter_kit")
def page():
  with me.box(
    style=me.Style(
      background="#fff",
      min_height="calc(100% - 48px)",
      padding=me.Padding(bottom=16),
    )
  ):
    with me.box(
      style=me.Style(
        width="min(720px, 100%)",
        margin=me.Margin.symmetric(horizontal="auto"),
        padding=me.Padding.symmetric(
          horizontal=16,
        ),
      )
    ):
      header_text()
      example_row()
      chat_input()
      output()
  footer()


def header_text():
  with me.box(
    style=me.Style(
      padding=me.Padding(
        top=64,
        bottom=36,
      ),
    )
  ):
    me.text(
      "Mesop Starter Kit",
      style=me.Style(
        font_size=36,
        font_weight=700,
        background="linear-gradient(90deg, #4285F4, #AA5CDB, #DB4437) text",
        color="transparent",
      ),
    )


EXAMPLES = [
  "How to tie a shoe",
  "Make a brownie recipe",
  "Write an email asking for a sick day off",
]


def example_row():
  is_mobile = me.viewport_size().width < 640
  with me.box(
    style=me.Style(
      display="flex",
      flex_direction="column" if is_mobile else "row",
      gap=24,
      margin=me.Margin(bottom=36),
    )
  ):
    for example in EXAMPLES:
      example_box(example, is_mobile)


def example_box(example: str, is_mobile: bool):
  with me.box(
    style=me.Style(
      width="100%" if is_mobile else 200,
      height=140,
      background="#F0F4F9",
      padding=me.Padding.all(16),
      font_weight=500,
      line_height="1.5",
      border_radius=16,
      cursor="pointer",
    ),
    key=example,
    on_click=click_example_box,
  ):
    me.text(example)

def click_example_box(e: me.ClickEvent):
  state = me.state(State)
  state.input = e.key

def chat_input():
  state = me.state(State)
  with me.box(
    style=me.Style(
      padding=me.Padding.all(8),
      background="white",
      display="flex",
      width="100%",
      border=me.Border.all(
        me.BorderSide(width=0, style="solid", color="black")
      ),
      border_radius=12,
      box_shadow="0 10px 20px #0000000a, 0 2px 6px #0000000a, 0 0 1px #0000000a",
    )
  ):
    with me.box(
      style=me.Style(
        flex_grow=1,
      )
    ):
      me.native_textarea(
        value=state.input,
        autosize=True,
        min_rows=4,
        placeholder="Enter your prompt",
        style=me.Style(
          padding=me.Padding(top=16, left=16),
          background="white",
          outline="none",
          width="100%",
          overflow_y="auto",
          border=me.Border.all(
            me.BorderSide(style="none"),
          ),
        ),
        on_blur=textarea_on_blur,
      )
    with me.content_button(type="icon", on_click=click_send):
      me.icon("send")

def textarea_on_blur(e: me.InputBlurEvent):
  state = me.state(State)
  state.input = e.value

def click_send(e: me.ClickEvent):
  state = me.state(State)
  if not state.input:
    return
  state.in_progress = True
  input = state.input
  state.input = ""
  yield

  for chunk in call_api(input):
    state.output += chunk
    yield
  state.in_progress = False
  yield


def call_api(input):
  # Replace this with an actual API call
  time.sleep(0.5)
  yield "Example of streaming an output"
  time.sleep(1)
  yield "\n\nOutput: " + input

def output():
  state = me.state(State)
  if state.output or state.in_progress:
    with me.box(
      style=me.Style(
        background="#F0F4F9",
        padding=me.Padding.all(16),
        border_radius=16,
        margin=me.Margin(top=36),
      )
    ):
      if state.output:
        me.markdown(state.output)
      if state.in_progress:
        with me.box(style=me.Style(margin=me.Margin(top=16))):
          me.progress_spinner()

def footer():
  with me.box(
    style=me.Style(
      position="sticky",
      bottom=0,
      padding=me.Padding.symmetric(vertical=16, horizontal=16),
      width="100%",
      background="#F0F4F9",
      font_size=14,
    )
  ):
    me.html(
      "Made with <a href='https://mesop-dev.github.io/mesop/'>Mesop</a>",
    )

```

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

### Build an Interactive Counter App

Source: https://mesop-dev.github.io/mesop/getting-started/core-concepts

This example demonstrates Mesop's interactivity by creating a counter that increments on button clicks. It involves defining state, an event handler, and a component to display the count and trigger the event.

```python
import mesop as me


@me.stateclass
class State:
  clicks: int


def button_click(event: me.ClickEvent):
  state = me.state(State)
  state.clicks += 1


@me.page(path="/counter")
def main():
  state = me.state(State)
  me.text(f"Clicks: {state.clicks}")
  me.button("Increment", on_click=button_click)

```

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

### Set Mesop state session backend via environment variable

Source: https://mesop-dev.github.io/mesop/api/config

Configure the state session backend for Mesop using the MESOP_STATE_SESSION_BACKEND environment variable. This example sets it to 'memory'.

```bash
MESOP_STATE_SESSION_BACKEND=memory mesop main.py
```

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

### Dockerfile for Mesop Application

Source: https://mesop-dev.github.io/mesop/guides/deployment

A Dockerfile to build an image for a Mesop application, including setting up the environment, installing dependencies, and running Gunicorn.

```dockerfile
FROM python:3.10.15-bullseye

RUN apt-get update && \
  apt-get install -y \
  # General dependencies
  locales \
  locales-all && \
  # Clean local repository of package files since they won't be needed anymore.
  # Make sure this line is called after all apt-get update/install commands have
  # run.
  apt-get clean && \
  # Also delete the index files which we also don't need anymore.
  rm -rf /var/lib/apt/lists/*

ENV LC_ALL en_US.UTF-8
ENV LANG en_US.UTF-8
ENV LANGUAGE en_US.UTF-8

# Install dependencies
COPY requirements.txt .
RUN pip install -r requirements.txt

# Create non-root user
RUN groupadd -g 900 mesop && useradd -u 900 -s /bin/bash -g mesop mesop
USER mesop

# Add app code here
COPY . /srv/mesop-app
WORKDIR /srv/mesop-app

# Run Mesop through gunicorn. Should be available at localhost:8080
CMD ["gunicorn", "--bind", "0.0.0.0:8080", "main:me"]


```

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

### Mesop Page Setup with AI Integration

Source: https://mesop-dev.github.io/mesop/codelab/4

Updates the main Mesop application to integrate Gemini and Claude models. Includes functions for displaying conversations and messages.

```python
import mesop as me
from data_model import State, Models, ModelDialogState, Conversation, ChatMessage
from dialog import dialog, dialog_actions
import claude
import gemini

# ... (keep the existing imports and styles)

# Replace page() with this:
@me.page(
    path="/",
    stylesheets=[
        "https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap"
    ],
)
def page():
    model_picker_dialog()
    with me.box(style=ROOT_BOX_STYLE):
        header()
        with me.box(
            style=me.Style(
                width="min(680px, 100%)",
                margin=me.Margin.symmetric(horizontal="auto", vertical=36),
            )
        ):
            me.text(
                "Chat with multiple models at once",
                style=me.Style(font_size=20, margin=me.Margin(bottom=24)),
            )
            chat_input()
            display_conversations()

# Add display_conversations and display_message:
def display_conversations():
    state = me.state(State)
    for conversation in state.conversations:
        with me.box(style=me.Style(margin=me.Margin(bottom=24))):
            me.text(f"Model: {conversation.model}", style=me.Style(font_weight=500))
            for message in conversation.messages:
                display_message(message)

def display_message(message: ChatMessage):
    style = me.Style(
        padding=me.Padding.all(12),
        border_radius=8,
        margin=me.Margin(bottom=8),
    )
    if message.role == "user":
        style.background = "#e7f2ff"
    else:
        style.background = "#ffffff"

    with me.box(style=style):
        me.markdown(message.content)
        if message.in_progress:
            me.progress_spinner()

```

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

### Composed Content Components with Valid Slot Rendering

Source: https://mesop-dev.github.io/mesop/components

Illustrates a valid pattern for composing content components where slots are correctly rendered by parent components. This example defines header, footer, and a main content layout, ensuring slots are handled appropriately.

```python
@me.content_component
def header(background_color: str):
  with me.box(style=me.Style(background=background_color)):
    me.slot()


@me.content_component
def footer(background_color: str):
  with me.box(style=me.Style(background=background_color)):
    me.slot()


@me.content_component()
def content_layout():
  with header(background_color="black"):
    me.text("Header")
  with me.box(style=me.Style(background="white")):
    me.slot()
  with footer(background_color="red")
    me.text("Footer")
```

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

### Create a Basic 'Hello World' Page

Source: https://mesop-dev.github.io/mesop/getting-started/core-concepts

This snippet shows how to create a root component for a specific path using the `@me.page` decorator and render simple text. Ensure you import mesop as me.

```python
import mesop as me


@me.page(path="/hello_world")
def app():
  me.text("Hello World")

```

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

### Create Project Directory

Source: https://mesop-dev.github.io/mesop/codelab

Create a new directory for your project and navigate into it.

```bash
mkdir duochat
cd duochat
```

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

### Basic Mesop Application

Source: https://mesop-dev.github.io/mesop/codelab

Create a simple Mesop application with a welcome message. This sets up the main page route.

```python
import mesop as me

@me.page(path="/")
def page():
    me.text("Welcome to DuoChat!")
```

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

### Create a Box component in Mesop

Source: https://mesop-dev.github.io/mesop/components/box

Demonstrates how to use the me.box component with various style configurations including background colors, margins, and borders.

```python
import mesop as me


def load(e: me.LoadEvent):
  me.set_theme_mode("system")


@me.page(
  on_load=load,
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://mesop-dev.github.io"]
  ),
  path="/box",
)
def app():
  with me.box(style=me.Style(background="red", padding=me.Padding.all(16))):
    with me.box(
      style=me.Style(
        background="green",
        height=50,
        margin=me.Margin.symmetric(vertical=24, horizontal=12),
        border=me.Border.symmetric(
          horizontal=me.BorderSide(width=2, color="pink", style="solid"),
          vertical=me.BorderSide(width=2, color="orange", style="solid"),
        ),
      )
    ):
      me.text(text="hi1")
      me.text(text="hi2")

    with me.box(
      style=me.Style(
        background="blue",
        height=50,
        margin=me.Margin.all(16),
        border=me.Border.all(
          me.BorderSide(width=2, color="yellow", style="dotted")
        ),
        border_radius=10,
      )
    ):
      me.text(text="Example with all sides bordered")

    with me.box(
      style=me.Style(
        background="purple",
        height=50,
        margin=me.Margin.symmetric(vertical=24, horizontal=12),
        border=me.Border.symmetric(
          vertical=me.BorderSide(width=4, color="white", style="double")
        ),
      )
    ):
      me.text(text="Example with top and bottom borders")

    with me.box(
      style=me.Style(
        background="cyan",
        height=50,
        margin=me.Margin.symmetric(vertical=24, horizontal=12),
        border=me.Border.symmetric(
          horizontal=me.BorderSide(width=2, color="black", style="groove")
        ),
      )
    ):
      me.text(text="Example with left and right borders")
```

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

### Install Mesop RC Version on Colab

Source: https://mesop-dev.github.io/mesop/internal/publishing

When testing on Colab, explicitly install the RC version of Mesop. Replace `0.X.Yrc1` with the specific RC version.

```python
 !pip install mesop==0.X.Yrc1

```

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

### Implement Mesop Card Components

Source: https://mesop-dev.github.io/mesop/components/card

Demonstrates the usage of me.card, me.card_header, me.card_content, and me.card_actions to build structured UI cards with different styles and configurations.

```python
import mesop as me


def load(e: me.LoadEvent):
  me.set_theme_mode("system")


@me.page(
  on_load=load,
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://mesop-dev.github.io"],
  ),
  path="/card",
)
def app():
  with me.box(
    style=me.Style(
      display="flex",
      flex_direction="column",
      gap=15,
      margin=me.Margin.all(15),
      max_width=500,
    )
  ):
    with me.card(appearance="outlined"):
      me.card_header(
        title="Grapefruit",
        subtitle="Kind of fruit",
        image="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
      )
      me.image(
        style=me.Style(
          width="100%",
        ),
        src="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
      )
      with me.card_content():
        me.text(
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
        )

      with me.card_actions(align="end"):
        me.button(label="Add to cart")
        me.button(label="Buy")

    with me.card(appearance="raised"):
      me.card_header(
        title="Grapefruit",
        subtitle="Kind of fruit",
        image="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
        image_type="small",
      )

      with me.card_content():
        me.text(
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
        )

      with me.card_actions(align="start"):
        me.button(label="Add to cart")
        me.button(label="Buy")

    with me.card(appearance="outlined"):
      me.card_header(
        title="Grapefruit",
        subtitle="Kind of fruit",
        image="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
        image_type="medium",
      )

      with me.card_content():
        me.text(
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
        )

      with me.card_actions(align="start"):
        me.button(label="Add to cart")
        me.button(label="Buy")

      me.card_header(
        title="Grapefruit",
        image="https://interactive-examples.mdn.mozilla.net/media/cc0-images/grapefruit-slice-332-332.jpg",
        image_type="large",
      )

      with me.card_content():
        me.text(
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
        )

      with me.card_actions(align="end"):
        me.button(label="Add to cart")
        me.button(label="Buy")

      me.card_header(
        title="Grapefruit",
        image_type="large",
      )

      with me.card_content():
        me.text(
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
        )
```

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

### me.date_range_picker

Source: https://mesop-dev.github.io/mesop/components/date_range_picker

Creates a date range picker component for selecting start and end dates.

```APIDOC
## me.date_range_picker

### Description
Creates a date range picker component.

### Parameters
- **label** (str) - Optional - Label for date range picker input. Default: ''
- **on_change** (Callable[[DateRangePickerChangeEvent], Any] | None) - Optional - Fires when valid date values for both start/end have been specified. Default: None
- **appearance** (Literal['fill', 'outline']) - Optional - The form field appearance style. Default: 'fill'
- **style** (Style | None) - Optional - Style for date range picker input. Default: None
- **disabled** (bool) - Optional - Whether it's disabled. Default: False
- **placeholder_start_date** (str) - Optional - Start date placeholder value. Default: ''
- **placeholder_end_date** (str) - Optional - End date placeholder value. Default: ''
- **required** (bool) - Optional - Whether it's required. Default: False
- **start_date** (date | None) - Optional - Start date initial value. Default: None
- **end_date** (date | None) - Optional - End date initial value. Default: None
- **readonly** (bool) - Optional - Whether the element is readonly. Default: False
- **hide_required_marker** (bool) - Optional - Whether the required marker should be hidden. Default: False
- **color** (Literal['primary', 'accent', 'warn']) - Optional - The color palette for the form field. Default: 'primary'
- **float_label** (Literal['always', 'auto']) - Optional - Whether the label should always float or float as the user types. Default: 'auto'
- **subscript_sizing** (Literal['fixed', 'dynamic']) - Optional - Whether the form field should reserve space for one line of hint/error text. Default: 'fixed'
- **hint_label** (str) - Optional - Text for the form field hint. Default: ''
- **key** (str | None) - Optional - The component key. Default: None
```

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

### Check Python Version

Source: https://mesop-dev.github.io/mesop/getting-started/installing

Verify that your Python installation meets the minimum version requirement (3.10 or later).

```bash
python --version

```

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

### Render code blocks with Mesop

Source: https://mesop-dev.github.io/mesop/components/code

Demonstrates basic usage of the code component, including language specification and rendering dynamic source code.

```python
import inspect

import mesop as me


def load(e: me.LoadEvent):
  me.set_theme_mode("system")


@me.page(
  on_load=load,
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://mesop-dev.github.io"]
  ),
  path="/code_demo",
)
def code_demo():
  with me.box(
    style=me.Style(
      padding=me.Padding.all(15),
      background=me.theme_var("surface-container-lowest"),
    )
  ):
    me.text("Defaults to Python")
    me.code("a = 123")

    me.text("Can set to other languages")
    me.code("<div class='a'>foo</div>", language="html")

    me.text("Bigger code block")
    me.code(inspect.getsource(me))
```

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

### Enable Static Folder 'assets' and Default URL Path

Source: https://mesop-dev.github.io/mesop/guides/static-assets

Sets the static folder to 'assets' relative to the current working directory. Files will be accessible under the default '/static' URL path.

```bash
cd /some/path/mesop-app
MESOP_STATIC_FOLDER=assets mesop main.py

```

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

### Import Mesop Labs

Source: https://mesop-dev.github.io/mesop/guides/labs

Add this import statement to your Mesop application to start using Mesop Labs components.

```python
import mesop.labs as mel

```

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

### Basic Badge Usage

Source: https://mesop-dev.github.io/mesop/components/badge

Demonstrates how to wrap a component with a badge using the me.badge context manager.

```python
import mesop as me


def load(e: me.LoadEvent):
  me.set_theme_mode("system")


@me.page(
  on_load=load,
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://mesop-dev.github.io"]
  ),
  path="/badge",
)
def app():
  with me.box(
    style=me.Style(
      display="block",
      padding=me.Padding(top=16, right=16, bottom=16, left=16),
      height=50,
      width=30,
    )
  ):
    with me.badge(content="1", size="medium"):
      me.text(text="text with badge")
```

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

### Mesop Page with Query Param Read/Write

Source: https://mesop-dev.github.io/mesop/api/query-params

Demonstrates reading query parameters and updating them via button clicks. Navigates to a new page with updated query parameters.

```python
import mesop as me

@me.page(path="/examples/query_params/page_2")
def page_2():
  me.text(f"query_params={me.query_params}")
  me.button("Add query param", on_click=add_query_param)
  me.button("Navigate", on_click=navigate)

def add_query_param(e: me.ClickEvent):
  me.query_params["key"] = "value"

def navigate(e: me.ClickEvent):
  me.navigate("/examples/query_params", query_params=me.query_params)

```

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

### Get All Values for a Repeated Query Param

Source: https://mesop-dev.github.io/mesop/api/query-params

Retrieves all values associated with a query parameter key, useful when a key is repeated.

```python
all_values = me.query_params.get_all('param_name')

```

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

### Implement a basic Radio component in Mesop

Source: https://mesop-dev.github.io/mesop/components/radio

Demonstrates how to use the radio component with a state class to manage the selected value and handle change events.

```python
import mesop as me


@me.stateclass
class State:
  radio_value: str = "2"


def on_change(event: me.RadioChangeEvent):
  s = me.state(State)
  s.radio_value = event.value


def load(e: me.LoadEvent):
  me.set_theme_mode("system")


@me.page(
  on_load=load,
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://mesop-dev.github.io"]
  ),
  path="/radio",
)
def app():
  s = me.state(State)
  with me.box(style=me.Style(margin=me.Margin.all(15))):
    me.text("Horizontal radio options")
    me.radio(
      on_change=on_change,
      options=[
        me.RadioOption(label="Option 1", value="1"),
        me.RadioOption(label="Option 2", value="2"),
      ],
      value=s.radio_value,
    )
    me.text(text="Selected radio value: " + s.radio_value)
```

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

### Get a Query Param Value

Source: https://mesop-dev.github.io/mesop/api/query-params

Retrieves a specific query parameter's value. Raises KeyError if the parameter does not exist.

```python
value: str = me.query_params['param_name']

```

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

### Basic Icon Usage

Source: https://mesop-dev.github.io/mesop/components/icon

Demonstrates how to render a standard Material icon within a Mesop page.

```python
import mesop as me


def load(e: me.LoadEvent):
  me.set_theme_mode("system")


@me.page(
  on_load=load,
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://mesop-dev.github.io"]
  ),
  path="/icon",
)
def app():
  with me.box(style=me.Style(margin=me.Margin.all(15))):
    me.text("home icon")
    me.icon(icon="home")
```

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

### Implement Expansion Panels and Accordions

Source: https://mesop-dev.github.io/mesop/components/expansion-panel

Demonstrates how to use the expansion_panel component within an accordion container, including state management for toggling panels.

```python
from dataclasses import field

import mesop as me


@me.stateclass
class State:
  normal_accordion: dict[str, bool] = field(
    default_factory=lambda: {"pie": True, "donut": False, "icecream": False}
  )
  multi_accordion: dict[str, bool] = field(
    default_factory=lambda: {"pie": False, "donut": False, "icecream": False}
  )


def load(e: me.LoadEvent):
  me.set_theme_mode("system")


@me.page(
  on_load=load,
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://mesop-dev.github.io"]
  ),
  path="/expansion_panel",
)
def app():
  state = me.state(State)
  with me.box(
    style=me.Style(
      display="flex",
      flex_direction="column",
      gap=15,
      margin=me.Margin.all(15),
      max_width=500,
    )
  ):
    me.text("Normal Accordion", type="headline-5")
    with me.accordion():
      with me.expansion_panel(
        key="pie",
        title="Pie",
        description="Type of snack",
        icon="pie_chart",
        disabled=False,
        expanded=state.normal_accordion["pie"],
        hide_toggle=False,
        on_toggle=on_accordion_toggle,
      ):
        me.text(
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
        )

      with me.expansion_panel(
        key="donut",
        title="Donut",
        description="Type of breakfast",
        icon="donut_large",
        disabled=False,
        expanded=state.normal_accordion["donut"],
        hide_toggle=False,
        on_toggle=on_accordion_toggle,
      ):
        me.text(
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
        )

      with me.expansion_panel(
        key="icecream",
        title="Ice cream",
        description="Type of dessert",
        icon="icecream",
        disabled=False,
        expanded=state.normal_accordion["icecream"],
        hide_toggle=False,
        on_toggle=on_accordion_toggle,
      ):
        me.text(
          "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed augue ultricies, laoreet nunc eget, ultricies augue. In ornare bibendum mauris vel sodales. Donec ut interdum felis. Nulla facilisi. Morbi a laoreet turpis, sed posuere arcu. Nam nisi neque, molestie vitae euismod eu, sollicitudin eu lectus. Pellentesque orci metus, finibus id faucibus et, ultrices quis dui. Duis in augue ac metus tristique lacinia."
        )

    me.text("Multi Accordion", type="headline-5")
    with me.box(
      style=me.Style(display="flex", gap=20, margin=me.Margin(bottom=15)),
    ):
      me.button(
        label="Open All", type="flat", on_click=on_multi_accordion_open_all
      )
      me.button(
        label="Close All", type="flat", on_click=on_multi_accordion_close_all
      )
```

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

### Enable Static Folder 'assets' with Custom URL Path

Source: https://mesop-dev.github.io/mesop/guides/static-assets

Sets the static folder to 'assets' and customizes the URL path to '/assets'. Files will be accessible under the specified '/assets' URL path.

```bash
cd /some/path
MESOP_STATIC_FOLDER=assets mesop mesop-app/main.py

```

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

### Client-Side Authorization Anti-Pattern

Source: https://mesop-dev.github.io/mesop/guides/state-management

Do not rely on client-manipulatable state flags for authorization. This example shows an anti-pattern where a client-side admin flag is used for access control.

```python
import mesop as me

@me.stateclass
class State:
    is_admin: bool   # ❌ Client can manipulate this

def on_delete(e: me.ClickEvent):
    state = me.state(State)
    if state.is_admin:
        db.delete_all()
```

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

### Set Page Title Example

Source: https://mesop-dev.github.io/mesop/api/commands/set-page-title

Demonstrates using me.set_page_title within an event handler to update the browser tab title based on user input.

```python
import mesop as me


def on_blur(e: me.InputBlurEvent):
  me.set_page_title(e.value)


def load(e: me.LoadEvent):
  me.set_theme_mode("system")


@me.page(
  on_load=load,
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://mesop-dev.github.io"]
  ),
  path="/set_page_title",
)
def app():
  with me.box(style=me.Style(margin=me.Margin.all(15))):
    me.input(label="Page title", on_blur=on_blur)
```

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

### Create links with Mesop

Source: https://mesop-dev.github.io/mesop/components/link

Demonstrates how to use the me.link component to create links that open in the same tab, a new tab, or with custom styles.

```python
import mesop as me


def load(e: me.LoadEvent):
  me.set_theme_mode("system")


@me.page(
  on_load=load,
  security_policy=me.SecurityPolicy(
    allowed_iframe_parents=["https://mesop-dev.github.io"]
  ),
  path="/link",
)
def link():
  with me.box(
    style=me.Style(
      margin=me.Margin.all(15), display="flex", flex_direction="column", gap=10
    )
  ):
    me.link(
      text="Open in same tab",
      url="https://mesop-dev.github.io/mesop/",
      style=me.Style(color=me.theme_var("primary")),
    )
    me.link(
      text="Open in new tab",
      open_in_new_tab=True,
      url="https://mesop-dev.github.io/mesop/",
      style=me.Style(color=me.theme_var("primary")),
    )
    me.link(
      text="Styled link",
      url="https://mesop-dev.github.io/mesop/",
      style=me.Style(color=me.theme_var("tertiary"), text_decoration="none"),
    )
```
Tokens:
Raw