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

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

Args.

html: An HTML string