HTML

All marimo elements extend the HTML element class.

marimo.as_html

as_html(value: object) -> Html

Convert a value to HTML that can be embedded into markdown.

This function returns an Html object representing value. Use it to embed values into Markdown or other HTML strings.

PARAMETER	DESCRIPTION
value	An object TYPE: object

RETURNS	DESCRIPTION
Html	An Html object

Example

import matplotlib.pyplot as plt
plt.plot([1, 2])
axis = plt.gca()
mo.md(
    f"""
    Here is a plot:

    {mo.as_html(axis)}
    """
)

marimo.Html

Html(text: str)

Bases: MIME

A wrapper around HTML text that can be used as an output.

Output an Html object as the last expression of a cell to render it in your app.

Use f-strings to embed Html objects as text into other HTML or markdown strings. For example:

hello_world = Html("<h2>Hello, World</h2>")
Html(
    f'''
    <h1>Hello, Universe!</h1>
    {hello_world}
    '''
)

ATTRIBUTE	DESCRIPTION
text	a string of HTML TYPE: str

PARAMETER	DESCRIPTION
text	a string of HTML TYPE: str

METHOD	DESCRIPTION
batch	convert this HTML element into a batched UI element
callout	wrap this element in a callout
center	center this element in the output area
right	right-justify this element in the output area

Initialize the HTML element.

Subclasses of HTML MUST call this method.

text property

text: str

A string of HTML representing this element.

batch

batch(**elements: UIElement[JSONType, object]) -> batch

Convert an HTML object with templated text into a UI element.

This method lets you create custom UI elements that are represented by arbitrary HTML.

Example

user_info = mo.md(
    '''
    - What's your name?: {name}
    - When were you born?: {birthday}
    '''
).batch(name=mo.ui.text(), birthday=mo.ui.date())

In this example, user_info is a UI Element whose output is markdown and whose value is a dict with keys 'name' and 'birthday' (and values equal to the values of their corresponding elements).

PARAMETER	DESCRIPTION
elements	the UI elements to interpolate into the HTML template. TYPE: UIElement[JSONType, object] DEFAULT: {}

callout

callout(
    kind: Literal[
        "neutral", "danger", "warn", "success", "info"
    ] = "neutral"
) -> Html

Create a callout containing this HTML element.

A callout wraps your HTML element in a raised box, emphasizing its importance. You can style the callout for different situations with the kind argument.

Examples:

mo.md("Hooray, you did it!").callout(kind="success")

mo.md("It's dangerous to go alone!").callout(kind="warn")

center

center() -> Html

Center an item.

Example

mo.md("# Hello, world").center()

RETURNS	DESCRIPTION
Html	An Html object.

left

left() -> Html

Left-justify.

Example

mo.md("# Hello, world").left()

RETURNS	DESCRIPTION
Html	An Html object.

right

right() -> Html

Right-justify.

Example

mo.md("# Hello, world").right()

RETURNS	DESCRIPTION
Html	An Html object.

style

style(
    style: Optional[dict[str, Any]] = None, **kwargs: Any
) -> Html

Wrap an object in a styled container.

Example

mo.md("...").style({"max-height": "300px", "overflow": "auto"})
mo.md("...").style(max_height="300px", overflow="auto")

PARAMETER	DESCRIPTION
style	an optional dict of CSS styles, keyed by property name TYPE: Optional[dict[str, Any]] DEFAULT: None
**kwargs	CSS styles as keyword arguments TYPE: Any DEFAULT: {}

marimo.iframe

iframe(
    html: str, *, width: str = "100%", height: str = "400px"
) -> Html

Embed an HTML string in an iframe.

Scripts by default are not executed using mo.as_html or mo.Html, so if you have a script tag (written as <script></script>), you can use mo.iframe for scripts to be executed.

You may also want to use this function to display HTML content that may contain styles that could interfere with the rest of the page.

Example

html = "<h1>Hello, world!</h1>"
mo.iframe(html)

PARAMETER	DESCRIPTION
html	An HTML string TYPE: str
width	The width of the iframe TYPE: str DEFAULT: '100%'
height	The height of the iframe TYPE: str DEFAULT: '400px'