anywidget-marimo
Toolkit for generating custom widgets from scratch for Marimo.
When & Why to Use This Skill
This Claude skill empowers developers to build custom, interactive UI components for Marimo notebooks from scratch. By leveraging the anywidget framework, it simplifies the integration of vanilla JavaScript and CSS with Python logic, enabling the creation of bespoke, reactive widgets that enhance data exploration and user interaction within a reactive notebook environment.
Use Cases
- Custom Data Visualizations: Rapidly prototype and deploy unique charts or interactive graphs that are specifically tailored to your dataset and not available in standard libraries.
- Interactive Dashboards: Build specialized control panels with custom buttons, sliders, and inputs that reactively update Python state and variables in real-time.
- Bespoke UI Components: Create polished, theme-aware (light/dark mode) interface elements using vanilla JavaScript and CSS to improve the user experience of Marimo-based applications.
- State Management: Implement complex widgets that synchronize internal JavaScript state with Python traitlets for seamless data flow between the frontend and backend.
| name | anywidget-marimo |
|---|---|
| description | Toolkit for generating custom widgets from scratch for Marimo. |
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"])
When sharing the anywidget, keep the example minimal. No need to combine it with marimo ui elements unless explicitly stated to do so.