HTML

All marimo elements extend the HTML element class.

marimo.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.

Example.

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

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

Args.

• value: An object

Returns.

• An Html object

class marimo.Html(text: str)

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}
    '''
)

Attributes.

• text: a string of HTML

Initialization Args.

• text: a string of HTML

Methods.

• 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

Public methods

batch(**elements)	Convert an HTML object with templated text into a UI element.
center()	Center an item.
right()	Right-justify.
left()	Left-justify.
callout([kind])	Create a callout containing this HTML element.
style([style])	Wrap an object in a styled container.

Public Data Attributes:

text	A string of HTML representing this element.

---

property text: str

A string of HTML representing this element.

batch(**elements: UIElement[JSONType, object]) → batch_plugin

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).

Args.

• elements: the UI elements to interpolate into the HTML template.

center() → Html

Center an item.

Example.

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

Returns.

An Html object.

right() → Html

Right-justify.

Example.

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

Returns.

An Html object.

left() → Html

Left-justify.

Example.

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

Returns.

An Html object.

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")

style(style: dict[str, Any] | None = 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")

Args.

• style: an optional dict of CSS styles, keyed by property name

• **kwargs: CSS styles as keyword arguments