The MyST AnyWidget Directive

2026-04-16T15:28:00+00:00

Authors of MyST Markdown can now embed interactive JavaScript widgets directly in content using the new {anywidget} directive.

What this means

You can now add any javascript interactivity to your MyST Markdown website or Jupyter Book.

Here’s an example that creates a clickable button 👇 to see an interactive version check out the post on the Jupyter Book blog.

How we got here

The idea of a portable widget interface for interactive computing isn’t new: anywidget has been an emerging standard in the Jupyter community for a while, leveraging modern Javascript principles (via ESM Modules), and giving you a simple initialize({ model }); render({ model, el })[1] contract so that widgets can be written once and reused across notebooks. AnyWidget in Jupyter interfaces supports tight integration with the kernel, allowing interactions similar to ipywidgets[2].

From the MyST Markdown and Jupyter Book point of view, we’ve focussed on supporting the render() side of the AnyWidget interface (see AnyWidget Frontend Modules) to allow MyST users to bring any kind of javascript-based interactivity into their articles and books without having to lean on Jupyter at all.

That part of the story started at SciPy 2024 with Trevor Mantz and Steve Purves hacking through a proof of concept during the sprints. Curvenote built working support for AnyWidgets as a MyST Markdown extension while working with researchers to support domain specific visualizations, and then upstreamed the implementation to create the {anywidget} directive that has just been released in mystmd and jb2.

The new directive in mystmd and the respective supporting package in @myst-theme/anywidget evolved with input from the JupyterBook team. Here’s how it is currently structured:

anywidget is a new node in the MyST AST, meaning first-class support for this capability outside of notebooks.
mystmd will bundle ESM and CSS modules at build time, ensuring dependencies are packaged with the book/article when it is published or deployed.
The ESM and CSS modules can either be (a) hosted remotely (which makes sense for shared widgets that many people are using or collaborating around) or (b) added as local files (which makes sense for widgets specific to a single book/website).
The NodeRenderer part of the release is an independent package @myst-theme/anywidget that can be optionally adopted by theme developers (it’s already built into the core themes).
For mystmd and Jupyter Book users, to upgrade to the latest theme. Run myst clean --templates before you next start your server and the latest version will be downloaded.

Usage

From an author’s perspective, point the directive at an ESM module (either a URL to a hosted script or a local path) and the widget runs in the page with its own state and DOM. You may optionally pass in a CSS URL/path and a JSON body of props to initialize the widget model.

To understand how to build your own widgets, the MyST widgets guide walks through the render({ model, el }) signature, styling with Shadow DOM, and cleanup on unmount. It’s the same mental model as anywidget in Jupyter, so if you’ve written or seen Jupyter AnyWidgets, you’re already most of the way there.

If you want to try it, the example-widgets repo has small demos (confetti, div-map, etc. Contributions are welcome!), and the opensci.dev blog has some live examples using scientific datasets.

What’s next

Widget support in MyST is still marked experimental so the details may evolve. There are still some things on the roadmap for {anywidget} which will no doubt expand as we hear of new requirements from widget creators, but we expect the following to be close to the top of the stack:

The model part of the interface, which will allow multiple instances of a widget to communicate on the page[1]
Shipping additional dependencies like static files that the widgets may need

The JupyterBook team is actively working on improving and evolving the widget model and integrating with Jupyter. We look forward to seeing what the community builds — visit the discord to showcase what you have built!

Acknowledgements

A shout out to my co-contributors on this work; to @mantz for the original hacking, @rowanc1 and @fwkoch for iterating on the downstream code, @agoose77 for working with me on the upstream changes, @choldgraph for insightful reviews and a docs! and the broader Jupyter Book Team for all the reviews and feedback.

Curvenote joins the mybinder.org federation

2024-02-22T16:19:00+00:00

Curvenote is now a part of the mybinder.org federation. By hosting a BinderHub instance running on the company’s infrastructure, additional capacity is available on the https://mybinder.org service.

curvenote.com/for/journals

The mybinder.org project provides a critical, free public service for scientists, researchers and educators worldwide. The ability to spin up a Jupyter server to run someone’s research code or run a class without local configuration is something that many academics and educators rely on.

Mybinder.org runs on a set of open source software components and standards, that not only powers the service but that also allows us to make solid steps forward in reproducibility in scientific research, namely REES and open source software components (like repo2docker) .

This is something we’re keen to shout about as Curvenote runs numerous small scale, independent, BinderHubs to power its journal infrastructure for notebook based publishing for reproducible scientific journals with BinderHub, Jupyter and MyST Markdown (https://mystmd.org) being important components of that.

Over the last few months a lot of work has gone into bringing up the Curvenote BinderHub instance on AWS. This is mainly because in the process, the AWS workflow based deployment has been pushed forward by Simon Li (@manics, University of Dundee, JupyterHub Core Team), solving many previous roadblocks around EKS (Elastic Kubernetes Service) usage and paving the way for easier future AWS based deployments (watch out for a future post from Simon with all the technical details).

It’s been great to collaborate with Simon during that time and get exposure to the details of BinderHub deployment on AWS.

The mybinder.org service makes a significant positive impact on public education, science and research. This impact is directly supported by the volunteer time of the BinderHub core team and the federation member organizations. Curvenote’s instance adds capacity to the service and a broader group of organizations contributing to the organization would lead to a more resilient public service, that is less prone to disruption when a single federation member leaves. If your organization has the resources to run and maintain a BinderHub, or makes heavy use of the mybinder.org service, encourage your organizations to run an instance and join the federation.