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

---