How to add marimo notebook cells to Quarto projects

TIL how to add marimo notebook cells to Quarto projects such as this one:

Instructions

1. Install uv (if you haven’t yet):

Terminal

curl -LsSf https://astral.sh/uv/install.sh | sh

2. Create a Quarto project (if you haven’t yet):

Terminal

uvx --from quarto-cli quarto create project

Here are some example configuration options:

3. Enter into the project folder and add the marimo extension:

Terminal

uvx --from quarto-cli quarto add marimo-team/quarto-marimo

4. Edit the index.qmd file (this is an example):

index.qmd

---
title: "test-quarto-marimo"
filters:
  - marimo-team/marimo
---
```python {.marimo}
import marimo as mo

slider = mo.ui.slider(1, 30)
```

```python {.marimo}
mo.md(
    f"""
    This is a **reactive** Python notebook that **runs automatically**
    when you modify them or
    interact with UI elements, like this slider: {slider}

    {"##" + "🍃" * slider.value}
    """
).callout("info")

5. Preview the project:

Terminal

uvx --with marimo --from quarto-cli quarto preview

6. Deploy it (for example to GitHub pages), the command is the following:

Terminal

uvx --with marimo --from quarto-cli quarto publish

There is a nice video by the marimo team explaining the whole process:

Conclusions

If you have read my previous post, you know I am very excited that we can now embed a single executable cell inside a website. You can also embed a whole notebook inside a website. However, I love the idea of adding many dependent executable cells to a website such as with this extension. The reactivity is definitely a nice plus!