Skip to article frontmatterSkip to article content
Site not loading correctly?

This may be due to an incorrect BASE_URL configuration. See the MyST Documentation for reference.

2. A container of anywidgets, statically

This page renders a layout container anywidget — a Row that arranges two child counters side by side — with no kernel attached. The children stay live (click +/-) and stay linked: because the two counters are jslinked, changing one updates the other, all in static HTML.

The container works via the plugin’s container-renderer hook: the Row’s JS calls host.renderChild(ref, el) for each child ref, and the runtime mounts each referenced anywidget (with its own ESM + CSS) into the row’s DOM.

The container

widgets/row/widget.py is a tiny anywidget.AnyWidget whose children trait holds child widgets and which declares _myst_child_traits = ['children'] so the static-export plugin knows those refs are renderable. widgets/row/widget.js reads the child refs and mounts each with host.renderChild.

import sys, pathlib
sys.path.insert(0, str(pathlib.Path().absolute()))
from ipywidgets import jslink
from widgets.counter import CounterWidget
from widgets.row import Row

Build two linked counters and arrange them in a row:

a = CounterWidget(label="Left counter", widget_id="counter_left", value=2)
b = CounterWidget(label="Right counter", widget_id="counter_right", value=2)
jslink((a, "value"), (b, "value"))
Row(children=[a, b], gap="24px")