skills.rest
legout
legoutCOMMUNITY
Explore all skills by this author →
𝕏@lignol23GitHub

anywidget-generator

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

3|Updated Apr 2, 2026
Search Tags:#javascript#css#ui-components#data-visualization#marimo#anywidget
One-click install
npx skills add https://github.com/legout/pi-config --skill anywidget-generator-legout
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: anywidget-generator
Source: https://github.com/legout/pi-config/tree/main/installed-skills/anywidget-generator
Command: npx skills add https://github.com/legout/pi-config --skill anywidget-generator-legout

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill streamlines the creation of bespoke interactive UI components for marimo notebooks by providing a standardized workflow for integrating vanilla JavaScript and CSS.

Core Features & Use Cases

  • Standardized Widget Structure: Enforces the use of the anywidget.AnyWidget class with proper traitlet synchronization.
  • Bespoke Styling: Provides built-in guidance for creating responsive, light/dark mode compatible CSS.
  • Use Case: Quickly prototype a custom data visualization or interactive control panel by generating the necessary ESM and CSS files, ensuring the widget is correctly wrapped for the marimo environment.

Quick Start

Use the anywidget-generator skill to create a custom interactive slider widget that updates a marimo variable in real time.

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?▼

You create custom interactive widgets for marimo by generating components using the anywidget class structure with vanilla JavaScript and CSS, ensuring proper traitlet synchronization and wrapping within the marimo UI framework.

How does traitlet synchronization work when building marimo UI components?▼

Traitlet synchronization in marimo UI components works by enforcing standard anywidget class structures, which link the JavaScript frontend state with Python backend variables to maintain real-time data flow.

Can I use vanilla JavaScript and CSS to style custom anywidget components?▼

Yes, you can use vanilla JavaScript and CSS to style custom anywidget components, utilizing built-in guidance to create responsive designs that are compatible with both light and dark mode environments.

What is the best way to prototype data visualization controls in marimo?▼

The best way to prototype data visualization controls in marimo is generating the necessary ESM and CSS files through a standardized anywidget workflow, ensuring the interactive control panel is correctly wrapped for the environment.

Do I need to use the anywidget class structure for marimo widget development?▼

Yes, you need to use the anywidget class structure for marimo widget development because it provides the standardized workflow and traitlet synchronization required to properly integrate vanilla JavaScript and CSS.

Why are my custom JavaScript and CSS widgets not wrapping correctly in marimo?▼

Custom JavaScript and CSS widgets may not wrap correctly in marimo if they fail to adhere to the anywidget class structure or lack proper integration within the marimo UI framework, disrupting traitlet synchronization.

Related Skills

Explore More Software Engineering Skills→
RDCrystalLabRDCrystalLab

anywidget-generator

Generate custom anywidget components for marimo notebooks with JavaScript rendering and traitlets.

Official
Intermediate
RDCrystalLabRDCrystalLab

implement-paper-auto

Implement research papers as interactive marimo notebooks with runnable examples.

Official
Advanced
DanSnowDanSnow
2

anywidget-generator

Generate Anywidget components for Marimo notebooks using vanilla JavaScript and CSS.

Community
Intermediate
panicPaulpanicPaul
5

anywidget-generator

Generate anywidget components with vanilla JavaScript _esm and optional _css for marimo notebooks.

Community
Intermediate