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.