Marimo Snippets in FastHTML

What is Marimo Snippets?

[Marimo Snippets](https://www.youtube.com/watch?v=OWfvdztF8Kc) is a new paradigm that allows you create interactive Python apps and show them inline in web apps. [Marimo](https://docs.marimo.io) is a reactive Python notebook environment that can be stored as pure Python and is deployable as an app. Now Marimo apps can be embedded inline in web apps. In this post I show how to embed Marimo Snippets using [FastHTML](https://www.fastht.ml).

Using Marimo Snippets in FastHTML

Header

First we need to make sure to include the [Marimo Snippets JavaScript utility](https://www.npmjs.com/package/@marimo-team/marimo-snippets) in our FastHTML headers. This is easy with the `Script` component.

from fasthtml.common import *
hdrs=(Script(src="https://cdn.jsdelivr.net/npm/@marimo-team/marimo-snippets@latest"),)
app,rt = fast_app(hdrs=hdrs)

Marimo IFrame

To embed a Marimo snippet we use the `<marimo-iframe>` HTML tag. We can easily create this new tag in FastHTML by importing `Marimo_iframe` from `fasthtml.components`. This creates a custom Python tag that mimics `<marimo-iframe>` in HTML. For more information about this technique check out [this blog post by Isaac Flath](https://isaac-flath.github.io/website/posts/boots/FasthtmlTutorial.html).

from fasthtml.components import Marimo_iframe

FastHTML Code

We can now write our Marimo app in FastHTML. In the code below a [standard Marimo slider](https://docs.marimo.io/api/inputs/slider) is defined and displayed. Within `Marimo_iframe` we should define a `Pre(Code(...))` component for every cell. You can see that the slider responds quickly. This is thanks to the [WebAssembly (WASM)](https://webassembly.org) backend. You can also play with the code and create new cells in this app.

Marimo_iframe(
    Pre(Code("import marimo as mo")),
    Pre(Code("slider = mo.ui.slider(1, 50, value=10)\nslider")),
    Pre(Code("slider.value * \"😁\"")),
),

Marimo Snippet in FastHTML

import marimo as mo

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

slider.value * "😁"

We can also choose to hide the code for a nice clean display by defining `data_show_code="false"` in the `Marimo_iframe` component.

Marimo_iframe(
    Pre(Code("import marimo as mo")),
    Pre(Code("slider = mo.ui.slider(1, 50, value=10)\nslider")),
    Pre(Code("slider.value * \"😁\"")),
    data_show_code="false",
),

import marimo as mo

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

slider.value * "😁"

And that's it! Hope you are as excited to explore Marimo Snippets as I am! There is so much potential here to make blog posts and web apps interactive. For more information check out [Vincent Warmerdam's blog post](https://koaning.io/posts/celebrating-inline-python-on-blogs-and-docs) and this [video on Marimo's YouTube channel](https://www.youtube.com/watch?v=OWfvdztF8Kc).

Back to TIL (Today I Learned) Overview