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 representingvalue
. 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 elementcallout
: wrap this element in a calloutcenter
: center this element in the output arearight
: 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.
- 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
ormo.Html
, so if you have a script tag (written as<script></script>
), you can usemo.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