When writing an anywidget use vanilla javascript in

_esm

and do not forget about

_css

. The css should look bespoke in light mode and dark mode. Keep the css small unless explicitly asked to go the extra mile. When you display the widget it must be wrapped via

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

.

<example title="Example anywidget implementation"> import anywidget import traitlets

class CounterWidget(anywidget.AnyWidget): _esm = """ // Define the main render function function render({ model, el }) { let count = () => model.get("number"); let btn = document.createElement("button"); btn.innerHTML =

count is ${count()}

; btn.addEventListener("click", () => { model.set("number", count() + 1); model.save_changes(); }); model.on("change:number", () => { btn.innerHTML =

count is ${count()}

; }); el.appendChild(btn); } // Important! We must export at the bottom here! export default { render }; """ _css = """button{ font-size: 14px; }""" number = traitlets.Int(0).tag(sync=True)

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

Grabbing the widget from another cell,

.value

is a dictionary.

print(widget.value["number"]) </example>

When sharing the anywidget, keep the example minimal. No need to combine it with marimo ui elements unless explicitly stated to do so.