marimo snippets

Example usage of marimo snippets, with mkdocs.

marimo snippets lets you selectively render Python code snippets as notebooks, or add buttons to snippets that link out to notebooks.

These snippets run via WebAssembly, meaning the browser executes Python code (no backend required). Most packages are supported, including numpy, scipy, scikit-learn, matplotlib, plotly, altair, polars, duckdb, and more. Consult the pyodide documentation for a full list.

Initialize marimo snippets

Include the following to load marimo snippets on your web page:

<script src="https://cdn.jsdelivr.net/npm/@marimo-team/marimo-snippets@1"></script>

Linking to notebooks

Use <marimo-button> to link out to a notebook:

<div>
<marimo-button>
```python
def hello_world():
    print("Hello, World!")

hello_world()
```
</marimo-button>
</div>

renders as

def hello_world():
    print("Hello, World!")

hello_world()

Embedding notebooks inline

It's also possible to replace a code block with an inlined notebook, using <marimo-iframe>:

<div>
<marimo-iframe>
```python
def hello_world():
    print("Hello, World!")

hello_world()
```
</marimo-iframe>
</div>

renders as

def hello_world():
    print("Hello, World!")

hello_world()

Multiple code blocks will be replaced with an entire notebook:

<div>
<marimo-iframe data-height="600px">

```python
import marimo as mo
```

```python
slider = mo.ui.slider(1, 10)
slider
```

```python
slider.value * "🍃"
```
</marimo-iframe>
</div>

renders as

import marimo as mo

slider = mo.ui.slider(1, 10)
slider

slider.value * "🍃"