anywidget-generator
Generate interactive anywidget components for marimo notebooks with vanilla JavaScript and CSS.
- Create custom widgets by defining
_esm(JavaScript render function) and_css(styled for light and dark modes) within ananywidget.AnyWidgetsubclass - Use traitlets to define reactive state properties that sync between Python and JavaScript via
model.get(),model.set(), and change listeners - Wrap widgets with
mo.ui.anywidget()for display in marimo cells and access state viawidget.valuedictionary - For complex widgets, point
_esmand_cssto external files using pathlib to keep code organized and maintainable
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()). You can also point _esm and _css to external files if needed using pathlib. This makes sense if the widget does a lot of elaborate JavaScript or CSS.
More from marimo-team/skills
marimo-notebook
Write a marimo notebook in a Python file in the right format.
2.5Kmarimo-batch
An opintionated skill to prepare a marimo notebook to make it ready for a scheduled run.
1.6Kjupyter-to-marimo
Convert a Jupyter notebook (.ipynb) to a marimo notebook (.py).
1.3Kwasm-compatibility
Check if a marimo notebook is compatible with WebAssembly (WASM) and report any issues.
1.1Kimplement-paper
Implement a research paper as an interactive marimo notebook together with the user. Start by understanding what the user wants to explore, fetch the paper via alphaxiv, then build a focused notebook.
882add-molab-badge
Add "Open in molab" badge(s) linking to marimo notebooks. Works with READMEs, docs, websites, or any markdown/HTML target.
765