anywidget-marimo
Provides patterns and code structures for building custom Marimo anywidgets.
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.Key capabilities
- →Define the main render function for a widget
- →Handle button click events within a widget
- →Update widget properties using model.set and model.save_changes
- →React to changes in model properties
- →Append elements to the widget container
- →Wrap an anywidget class with mo.ui.anywidget
How it works
The skill defines a Python class that specifies JavaScript and CSS for a custom widget, then wraps it for display in Marimo.
Inputs & outputs
When to use anywidget-marimo
- →Build custom dashboard widgets
- →Create interactive data selectors
- →Implement bespoke UI controls
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.
When not to use it
- →When the widget does not require custom JavaScript or CSS
- →When the widget does not need to interact with Marimo's model
- →When the widget is not intended for use within a Marimo notebook
Prerequisites
Limitations
- →Requires explicit wrapping via mo.ui.anywidget
- →CSS should be kept small unless explicitly asked for more detail
- →Examples should be minimal and not combined with other Marimo UI elements unless stated
How it compares
This workflow allows direct embedding of custom JavaScript and CSS for UI components, unlike using only pre-built Marimo UI elements.
Compared to similar skills
anywidget-marimo side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| anywidget-marimo (this skill) | 0 | 5mo | No flags | Intermediate |
| telegram-dev | 2 | 8mo | Review | Intermediate |
| add-new-setting-field | 1 | 7mo | No flags | Intermediate |
| textual | 143 | 9mo | Review | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by diegosouzapw
View all by diegosouzapw →You might also like
telegram-dev
2025Emma
Telegram 生态开发全栈指南 - 涵盖 Bot API、Mini Apps (Web Apps)、MTProto 客户端开发。包括消息处理、支付、内联模式、Webhook、认证、存储、传感器 API 等完整开发资源。
add-new-setting-field
tsukumijima
【設定追加時は必ず参照】KonomiTV に新しい設定 (v-switch/v-select など) を追加する際の必須手順。SettingsStore.ts / Settings.ts / config.py / Settings/*.vue への追加が必要
textual
KyleKing
Expert guidance for building TUI (Text User Interface) applications with the Textual framework. Invoke when user asks about Textual development, TUI apps, widgets, screens, CSS styling, reactive programming, or testing Textual applications.
streamlit
sverzijl
When working with Streamlit web apps, data dashboards, ML/AI app UIs, interactive Python visualizations, or building data science applications with Python
d3-visualization
lyndonkl
Use when creating custom, interactive data visualizations with D3.js—building bar/line/scatter charts from scratch, creating network diagrams or geographic maps, binding changing data to visual elements, adding zoom/pan/brush interactions, animating chart transitions, or when chart libraries (Highcharts, Chart.js) don't support your specific visualization design and you need low-level control over data-driven DOM manipulation, scales, shapes, and layouts.
3d-web-experience
davila7
Expert in building 3D experiences for the web - Three.js, React Three Fiber, Spline, WebGL, and interactive 3D scenes. Covers product configurators, 3D portfolios, immersive websites, and bringing depth to web experiences. Use when: 3D website, three.js, WebGL, react three fiber, 3D experience.