anywidget-generator

Create a class inheriting from anywidget.AnyWidget with an _esm string containing a render function and synced traitlets, then display it with mo.ui.anywidget(YourWidget()). Access its state through widget.value, which returns a dictionary of trait values.

Define traits with traitlets and tag them with sync=True. In JavaScript, read values with model.get(), update them with model.set() followed by model.save_changes(), and react to changes with model.on("change:traitname", callback).

Yes, point _esm and _css to external files using pathlib, typically with paths relative to Path(__file__). This is recommended when the widget contains elaborate JavaScript or CSS that would clutter the Python file.

Include a _css string on the widget class and use the media query @media (prefers-color-scheme: dark) to override colors for dark mode. Keep the CSS minimal and bespoke so it looks intentional in both light and dark themes.

Common causes are missing the default export of the render function in _esm, forgetting to wrap the widget with mo.ui.anywidget(), or not tagging traits with sync=True. Check that the module ends with export default { render }.