Celebrating inline Python on blogs and docs

Disclaimer: I am about to promote something that I have been working on at work.

When you load this page, you should see an interactive 2d slider element appear. It will appear in an iframe and you're able to scroll down to see the Python code that generates it.

chart = (
    alt.Chart(df_base).mark_point(color="gray").encode(x="x", y="y") + 
    alt.Chart(df).mark_point().encode(x="x", y="y")
).properties(width=250, height=250)

mo.vstack([
    mo.md("""### Play around with `Slider2D` """),
    mo.hstack([slider_2d, chart])
])

from wigglystuff import Slider2D
import altair as alt
import pandas as pd
import numpy as np
import marimo as mo

slider_2d = mo.ui.anywidget(Slider2D(width=200, height=200))

df = pd.DataFrame({
    "x": np.random.normal(slider_2d.x * 10, 1, 2000), 
    "y": np.random.normal(slider_2d.y * 10, 1, 2000)
})

df_base = pd.DataFrame({
    "x": np.random.normal(0, 1, 2000), 
    "y": np.random.normal(0, 1, 2000)
})

Here's another one. This one is really fancy because you can mimic what it is like to be a matrix that performs PCA that turns a 3d array with RGB values and map that to two dimensions.

X_tfm = rgb_mat @ pca_mat.matrix
df_pca = pd.DataFrame({"x": X_tfm[:, 0], "y": X_tfm[:, 1], "c": color})
pca_chart = alt.Chart(df_pca).mark_point().encode(x="x", y="y", color=alt.Color('c:N', scale = None)).properties(width=250, height=250)

mo.vstack([
    mo.md("""### PCA demo with `Matrix` """),
    mo.hstack([pca_mat, pca_chart])
])

pca_mat = mo.ui.anywidget(Matrix(np.random.normal(0, 1, size=(3, 2)), step=0.1))
rgb_mat = np.random.randint(0, 255, size=(1000, 3))
color = ["#{0:02x}{1:02x}{2:02x}".format(r, g, b) for r,g,b in rgb_mat]

rgb_df = pd.DataFrame({
    "r": rgb_mat[:, 0], "g": rgb_mat[:, 1], "b": rgb_mat[:, 2], 'color': color
})

from wigglystuff import Matrix
import altair as alt
import pandas as pd
import numpy as np
import marimo as mo

Both of these widgets are from my wigglystuff library and they are designed to run in Python notebooks. And yet, I seem to be able to embed them on my blog natively. Curious how I did that?

Enter marimo snippets

All of this works via the marimo-snippets library. Let's say that I have these code blocks on my blog:

```python
import marimo as mo
```

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

```python
slider.value * "🍃"
```

Then I can wrap that, like so:

<div>
<marimo-iframe>
```python
import marimo as mo
```
```python
slider = mo.ui.slider(1, 10)
slider
```

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

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

This allows me to inject an iframe with a marimo notebook (that completely runs in WASM on the frontend) where these codeblocks are declared. In this particular case it would look like this:

import marimo as mo

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

slider.value * "🍃"

Settings

There are a bunch of settings at your disposal too. All the details are listed here, but the most useful setting is the "show code" flag. This lets you determine if you want the code to run as an app of if you want the reader to also be able to interact with the code.

<marimo-iframe data-height="500px" data-show-code="false">

So much potential!

This is going to be so much fun!

Image how many Python snippets can be shared!
Image having interactive writing on your blog without having to learn Javasript!
Image how great this could be for education! Calmcode has started using this so you don't have to install anything locally in order to see how the code will run.
Image how great docs can be with this!

To learn more about this library, check the readme and docs here. I would love to see more of this on the web, feel free to ping me on socials or join the marimo Discord if you have any feedback.