anywidget-marimo
Toolkit for generating custom widgets from scratch for Marimo.
Install
mkdir -p .claude/skills/anywidget-marimo && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/17144" && unzip -o skill.zip -d .claude/skills/anywidget-marimo && rm skill.zipInstalls to .claude/skills/anywidget-marimo
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Toolkit for generating custom widgets from scratch for Marimo.About this skill
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()).
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.