AnyWidget and Marimo: build Python notebook widgets

This tutorial explains how to build Python notebook widgets with AnyWidget, using Marimo for the examples. A drawing surface updates a chart, while a two-dimensional slider feeds coordinates into a separate logging widget. These examples introduce the shared state between browser interactions and Python code.

The counter walkthrough shows two views of one widget sharing the same count. It also exposes a Marimo integration detail: changing a widget's internal state does not automatically trigger dependent cells in the demonstrated setup. The speaker wraps the widget with Marimo's UI AnyWidget helper so those changes propagate through the notebook.

The code explanation covers JavaScript in the _esm property, an exported render function, and its model and element arguments. Traitlets hold synchronized values; browser events and model changes update the interface. A CSS example demonstrates widget-scoped styles with separate red and blue buttons.

For library packaging, the speaker examines Wiggly Stuff, moves JavaScript into separate files, and includes static assets through pyproject.toml. Build steps can compile React and minimize code. The speaker recommends an existing repository as a starting point for an AI agent. The final example uses DiceKit to explain when a static HTML representation is sufficient, without an interactive widget.