anywidget-generator

Generate anywidget components with vanilla JavaScript and CSS for marimo notebooks.

164|14|Updated Feb 10, 2026
One-click install
npx skills add https://github.com/marimo-team/skills --skill anywidget-generator-marimo-team
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: anywidget-generator
Source: https://github.com/marimo-team/skills/tree/main/skills/anywidget
Command: npx skills add https://github.com/marimo-team/skills --skill anywidget-generator-marimo-team

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill simplifies the creation of customizable interactive widgets for marimo notebooks, enabling users to embed dynamic content easily.

Core Features & Use Cases

  • Widget Generation: Generate anywidget components using vanilla JavaScript within Jupyter notebooks.
  • Customization: Incorporate bespoke CSS to match light and dark modes, with options for external file referencing.
  • Use Case: For example, develop a counter widget that updates in real-time based on user interaction with minimal setup.

Quick Start

Use the anywidget skill to create a simple counter widget in your notebook.

Frequently Asked Questions about anywidget-generator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create custom interactive widgets for marimo notebooks?

To create custom interactive widgets for marimo notebooks, you can use vanilla JavaScript and CSS to generate anywidget components, facilitating dynamic content display and user engagement within data science workflows.

Can I use external CSS and JavaScript files for large widgets in marimo?

Yes, you can use external CSS and JavaScript files for large widgets in marimo. The widget generation supports external resource linking to handle complex or large UI components without cluttering your notebook.

How do I style custom widgets to match light and dark modes in marimo?

You style custom widgets to match light and dark modes in marimo by incorporating bespoke CSS. This allows your generated anywidget components to adapt dynamically to the notebook's active theme.

What is the best way to build a real-time counter widget in a Jupyter notebook?

The best way to build a real-time counter widget in a Jupyter notebook is using the anywidget framework. You can develop a counter that updates dynamically based on user interaction with minimal setup.

Do I need prior web development experience to build marimo widgets?

You need basic knowledge of vanilla JavaScript and CSS to build marimo widgets. This Skill is designed for developers creating embedded UI components and requires understanding of these web technologies to customize interactive elements.