Routes¶

marimo.routes ¶

routes(
    routes: dict[
        str,
        Union[
            Callable[[], object],
            Callable[[], Coroutine[None, None, object]],
            object,
        ],
    ]
)

Bases: UIElement[str, str]

Renders a list of routes that are switched based on the URL path.

Routes currently don't support nested routes, or dynamic routes (e.g. #/user/:id). If you'd like to see these features, please let us know on GitHub: https://github.com/marimo-team/marimo/issues

For a simple-page-application (SPA) experience, you should use hash-based routing. For example, prefix your routes with #/.

If you are using a multi-page-application (MPA) with marimo.create_asgi_app, you should use path-based routing. For example, prefix your routes with /.

Examples:

mo.routes(
    {
        "#/": render_home,
        "#/about": render_about,
        "#/contact": render_contact,
        mo.routes.CATCH_ALL: render_home,
    }
)

PARAMETER	DESCRIPTION
`routes`	A dictionary of routes, where the key is the URL path and the value is a function that returns the content to display. TYPE: `dict[str, Union[Callable[[], object], Callable[[], Coroutine[None, None, object]], object]]`

RETURNS	DESCRIPTION
`Html`	An Html object. TYPE: `Html`

CATCH_ALL `class-attribute` `instance-attribute` ¶

CATCH_ALL = '{/*path}'

DEFAULT `class-attribute` `instance-attribute` ¶

DEFAULT = '/'

text `property` ¶

text: str

A string of HTML representing this element.

value `property` `writable` ¶

value: T

The element's current value.

batch ¶

batch(*args: Any, **kwargs: Any) -> Any

callout ¶

callout(*args: Any, **kwargs: Any) -> Html

center ¶

center(*args: Any, **kwargs: Any) -> Html

form ¶

form(
    label: str = "",
    *,
    bordered: bool = True,
    loading: bool = False,
    submit_button_label: str = "Submit",
    submit_button_tooltip: Optional[str] = None,
    submit_button_disabled: bool = False,
    clear_on_submit: bool = False,
    show_clear_button: bool = False,
    clear_button_label: str = "Clear",
    clear_button_tooltip: Optional[str] = None,
    validate: Optional[
        Callable[[Optional[JSONType]], Optional[str]]
    ] = None,
    on_change: Optional[
        Callable[[Optional[T]], None]
    ] = None
) -> form[S, T]

Create a submittable form out of this UIElement.

Creates a form that gates submission of a UIElement's value until a submit button is clicked. The form's value is the value of the underlying element from the last submission.

Examples:

Convert any UIElement into a form:

prompt = mo.ui.text_area().form()

Combine with HTML.batch to create a form made out of multiple UIElements:

form = (
    mo.ui.md(
        '''
    **Enter your prompt.**

    {prompt}

    **Choose a random seed.**

    {seed}
    '''
    )
    .batch(
        prompt=mo.ui.text_area(),
        seed=mo.ui.number(),
    )
    .form()
)

PARAMETER	DESCRIPTION
`label`	A text label for the form. TYPE: `str` DEFAULT: `''`
`bordered`	Whether the form should have a border. TYPE: `bool` DEFAULT: `True`
`loading`	Whether the form should be in a loading state. TYPE: `bool` DEFAULT: `False`
`submit_button_label`	The label of the submit button. TYPE: `str` DEFAULT: `'Submit'`
`submit_button_tooltip`	The tooltip of the submit button. TYPE: `Optional[str]` DEFAULT: `None`
`submit_button_disabled`	Whether the submit button should be disabled. TYPE: `bool` DEFAULT: `False`
`clear_on_submit`	Whether the form should clear its contents after submitting. TYPE: `bool` DEFAULT: `False`
`show_clear_button`	Whether the form should show a clear button. TYPE: `bool` DEFAULT: `False`
`clear_button_label`	The label of the clear button. TYPE: `str` DEFAULT: `'Clear'`
`clear_button_tooltip`	The tooltip of the clear button. TYPE: `Optional[str]` DEFAULT: `None`
`validate`	A function that takes the form's value and returns an error message if invalid, or `None` if valid. TYPE: `Optional[Callable[[Optional[JSONType]], Optional[str]]]` DEFAULT: `None`
`on_change`	A callback that takes the form's value and returns an error message if invalid, or `None` if valid. TYPE: `Optional[Callable[[Optional[T]], None]]` DEFAULT: `None`

left ¶

left(*args: Any, **kwargs: Any) -> Html

right ¶

right(*args: Any, **kwargs: Any) -> Html

send_message ¶

send_message(
    message: Dict[str, object],
    buffers: Optional[Sequence[bytes]],
) -> None

Send a message to the element rendered on the frontend from the backend.

style ¶

style(*args: Any, **kwargs: Any) -> Html

python import marimo

app = marimo.App()

@app.cell def __(): import marimo as mo return

@app.cell def __(): mo.sidebar( [ mo.md("# marimo"), mo.nav_menu( { "#/": f"{mo.icon('lucide:home')} Home", "#/about": f"{mo.icon('lucide:user')} About", "#/contact": f"{mo.icon('lucide:phone')} Contact", "Links": { "https://twitter.com/marimo_io": "Twitter", "https://github.com/marimo-team/marimo": "GitHub", }, }, orientation="vertical", ), ] ) return

@app.cell def __(): mo.routes({ "#/": mo.md("# Home"), "#/about": mo.md("# About"), "#/contact": mo.md("# Contact"), mo.routes.CATCH_ALL: mo.md("# Home"), }) return