Custom UI elements¶
Build custom UI plugins that hook into marimo’s reactive execution engine by using anywidget.
anywidget is a Python library and specification for creating custom Jupyter-compatible widgets. marimo supports anywidget, allowing you to import anywidget widgets or create your own custom widgets and use them in your notebooks and apps.
Importing a widget¶
You can use anywidgets that others have built, such as quak or drawdata, directly in marimo.
Here is an example using drawdata
:
# pip install drawdata
from drawdata import ScatterWidget
widget = mo.ui.anywidget(ScatterWidget())
# In another cell, you can access the widget's value
widget.value
# You can also access the widget's specific properties
widget.data
widget.data_as_polars
For additional examples, see our repo.
Custom widget¶
import anywidget
import traitlets
import marimo as mo
class CounterWidget(anywidget.AnyWidget):
# Widget front-end JavaScript code
_esm = """
function render({ model, el }) {
let getCount = () => model.get("count");
let button = document.createElement("button");
button.innerHTML = `count is ${getCount()}`;
button.addEventListener("click", () => {
model.set("count", getCount() + 1);
model.save_changes();
});
model.on("change:count", () => {
button.innerHTML = `count is ${getCount()}`;
});
el.appendChild(button);
}
export default { render };
"""
_css = """
button {
padding: 5px !important;
border-radius: 5px !important;
background-color: #f0f0f0 !important;
&:hover {
background-color: lightblue !important;
color: white !important;
}
}
"""
# Stateful property that can be accessed by JavaScript & Python
count = traitlets.Int(0).tag(sync=True)
widget = mo.ui.anywidget(CounterWidget())
# In another cell, you can access the widget's value
widget.value
# You can also access the widget's specific properties
widget.count
- class marimo.ui.anywidget(widget: AnyWidget)¶
Create a UIElement from an AnyWidget. This proxies all the widget’s attributes and methods.
Example.
from drawdata import ScatterWidget import marimo as mo scatter = ScatterWidget() scatter = mo.ui.anywidget(scatter) # In another cell, access its value # This works for all widgets scatter.value # Or attributes specifically on the ScatterWidget scatter.data_as_pandas scatter.data_as_polars
Attributes.
value
: The value of the widget’s traits as a dictionary.widget
: The widget being wrapped.
Initialization Args.
widget
: The widget to wrap.
Public methods
Inherited from
UIElement
form
([label, bordered, loading, ...])Create a submittable form out of this
UIElement
.send_message
(message, buffers)Send a message to the element rendered on the frontend from the backend.
Inherited from
Html
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:
Inherited from
UIElement
value
The element’s current value.
Inherited from
Html
text
A string of HTML representing this element.