AnyWidget

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.

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

Importing a widget

# 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

---

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.

---