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.

Make Jupyter Book pages reactive with marimo.

Jupyter Book builds books and documentation sites from MyST Markdown and notebooks. jupyter-book-marimo adds reactive Python, SQL, and Markdown cells to its MyST pages.

The plugin compiles every {marimo} directive on a page into one marimo app. Jupyter Book publishes the authored content and initial cell output as static HTML, then hydrates the app in the browser.

Move the slider. The page has already been built, served, and loaded as static HTML. The Markdown below still updates because marimo hydrates the cells after the page loads.

How it works

The executable plugin collects every {marimo} directive before the page compiles. Jupyter Book keeps MyST navigation, cross-references, and layout around each projected cell. A shared browser runtime restores marimo dataflow after the static page loads, so dependencies can cross ordinary MyST sections.

Quickstart

Write a MyST page with {marimo} cells.

For instance, this cell:

```{marimo} python
result = "Only the cell output is shown."
result
```

produces this output:

You can make a cell editable:

```{marimo} python
:editor: true

editor_result = "Change me" + ("!" * 3)
editor_result
```

And another cell can read its value:

But how do I run this?

Install the plugin in the same environment as Jupyter Book.

pip install jupyter-book-marimo

Register the executable plugin in myst.yml.

project:
  plugins:
    - type: executable
      path: .venv/bin/jupyter-book-marimo

Use the executable path for your book environment. When myst.yml lives in docs/ and the virtual environment lives at the repository root, use ../.venv/bin/jupyter-book-marimo. On Windows, use .venv/Scripts/jupyter-book-marimo.exe, or ../.venv/Scripts/jupyter-book-marimo.exe for the same nested layout.

Then write cells in any MyST page:

```{marimo} python
import marimo as mo

slider = mo.ui.slider(start=1, stop=10, step=1, label="islands")
slider
```

```{marimo} python
"🏝️" * round(slider.value)
```

Build the book:

jupyter-book build --html

The tutorials in the sidebar are marimo notebooks rendered through this plugin. Open them to see larger examples with UI, data flow, SQL, layouts, Markdown, and plots.

Reference