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

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

---

class marimo.ui.anywidget(widget: AnyWidget)

Create a UIElement from an AnyWidget.

Example.

from drawdata import ScatterWidget
import marimo as mo

widget = mo.ui.anywidget(ScatterWidget())

# In another cell, access its value
widget.value

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.

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.

---