Skip to content

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.

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

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

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

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

Args.

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

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.

An Html object.

left 

left() -> Html

Left-justify.

Example.

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

Returns.

An Html object.

right 

right() -> Html

Right-justify.

Example.

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

Returns.

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

Args.

  • style: an optional dict of CSS styles, keyed by property name
  • **kwargs: CSS styles as keyword arguments

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)

Args.

  • html: An HTML string