Embedding notebooks with parent->child exposure

.pre-commit-config.yaml

@@ -31,7 +31,7 @@ repos:
         pass_filenames: false
 
   - repo: https://github.com/astral-sh/ruff-pre-commit
-    rev: v0.14.1
+    rev: v0.14.2
     hooks:
       # Run the linter
       - id: ruff
@@ -40,7 +40,7 @@ repos:
       - id: ruff-format
 
   - repo: https://github.com/biomejs/pre-commit
-    rev: v2.2.6
+    rev: v2.3.1
     hooks:
       - id: biome-check
         args: [--diagnostic-level, warn]

examples/reactive_embedding/README.md

@@ -0,0 +1,28 @@
+# Reactive embedding with parent→child exposure of variables
+
+This example shows how to embed children notebooks in a parent notebook and expose parent variables
+read-only and reactively to the children.
+
+> [!TIP]
+> New to marimo? Run `marimo tutorial intro` and `marimo tutorial dataflow`
+> at the command line first!
+
+_Looking for examples on making chatbots? Check out the [`ai/chat`](../ai/chat)
+examples folder_.
+
+## Running examples
+
+The requirements of each notebook are serialized in them as a top-level
+comment. Here are the steps to open an example notebook:
+
+1. [Install `uv`](https://github.com/astral-sh/uv/?tab=readme-ov-file#installation)
+2. Open an example with `uvx marimo edit --sandbox <notebook-url>`
+
+> [!TIP]
+> The [`--sandbox` flag](https://docs.marimo.io/guides/editor_features/package_management.html) opens the notebook in an isolated virtual environment,
+> automatically installing the notebook's dependencies 📦
+
+You can also open notebooks without `uv`, in which case you'll need to
+manually [install marimo](https://docs.marimo.io/getting_started/index.html#installation)
+first. Then run `marimo edit <notebook-url>`; however, you'll also need to
+install the requirements yourself.

examples/reactive_embedding/child_1.py

@@ -0,0 +1,57 @@
+import marimo
+
+__generated_with = "0.17.2"
+app = marimo.App(width="medium")
+
+
+@app.cell
+def _():
+    import marimo as mo
+    return (mo,)
+
+
+@app.cell
+def _(parent):
+    try:
+        _parent = parent
+    except NameError:
+        _parent = None
+    x_from_parent = getattr(_parent, "x", "〈not provided〉")
+    return (x_from_parent,)
+
+
+@app.cell
+def _(mo):
+    slider = mo.ui.slider(0, 20, 1, label="**child_1.v**")
+    return (slider,)
+
+
+@app.cell
+def _(slider):
+    v = slider.value
+    return (v,)
+
+
+@app.cell
+def _(mo, v, x_from_parent):
+    msg = mo.md(f"""
+    - I see **parent.x = {x_from_parent}
+    - My v = {v}
+    """)
+    return (msg,)
+
+
+@app.cell
+def _(mo, msg, slider):
+    mo.callout(
+        mo.vstack([
+            mo.md("### Child 1"),
+            msg,
+            slider,
+        ])
+    )
+    return
+
+
+if __name__ == "__main__":
+    app.run()

examples/reactive_embedding/child_2.py

@@ -0,0 +1,59 @@
+import marimo
+
+__generated_with = "0.17.2"
+app = marimo.App(width="medium")
+
+
+@app.cell
+def _():
+    import marimo as mo
+    return (mo,)
+
+
+@app.cell
+def _(parent):
+    try:
+        _parent = parent
+    except NameError:
+        _parent = None
+    x_from_parent = getattr(_parent, "x", "〈not provided〉")
+    y_from_parent = getattr(_parent, "y", "〈not provided〉")
+    return x_from_parent, y_from_parent
+
+
+@app.cell
+def _(mo):
+    slider = mo.ui.slider(0, 20, 1, label="**child_2.a**")
+    return (slider,)
+
+
+@app.cell
+def _(slider):
+    a = slider.value
+    return (a,)
+
+
+@app.cell
+def _(a, mo, x_from_parent, y_from_parent):
+    msg = mo.md(f"""
+    - I see **parent.x = {x_from_parent}
+    - I see **parent.y = {y_from_parent}
+    - My a = {a}
+    """)
+    return (msg,)
+
+
+@app.cell
+def _(mo, msg, slider):
+    mo.callout(
+        mo.vstack([
+            mo.md("### Child "),
+            msg,
+            slider,
+        ])
+    )
+    return
+
+
+if __name__ == "__main__":
+    app.run()

examples/reactive_embedding/parent.py

@@ -0,0 +1,82 @@
+import marimo
+
+__generated_with = "0.17.2"
+app = marimo.App(width="medium")
+
+
+@app.cell
+def _():
+    import marimo as mo
+
+    from child_1 import app as child_1_app
+    from child_2 import app as child_2_app
+    return child_1_app, child_2_app, mo
+
+
+@app.cell
+def _(mo):
+    x_slider = mo.ui.slider(0, 20, 1, label="parent.x", full_width=True, show_value=True)
+    return (x_slider,)
+
+
+@app.cell
+def _(x_slider):
+    x = x_slider.value
+    return (x,)
+
+
+@app.cell
+def _(mo):
+    y_slider = mo.ui.slider(0, 20, 1, label="parent.y", full_width=True, show_value=True)
+    return (y_slider,)
+
+
+@app.cell
+def _(y_slider):
+    y = y_slider.value
+    return (y,)
+
+
+@app.cell
+async def _(child_1_app, x):
+    embed_1_result = await child_1_app.embed(
+        expose={"x": x},
+        namespace="parent",
+        readonly=True
+    )
+    return (embed_1_result,)
+
+
+@app.cell
+async def _(child_2_app, x, y):
+    embed_2_result = await child_2_app.embed(
+        expose={"x": x, "y": y},
+        namespace="parent",
+        readonly=True
+    )
+    return (embed_2_result,)
+
+
+@app.cell
+def _(embed_1_result, embed_2_result, mo, x_slider, y_slider):
+    mo.callout(
+        mo.vstack([
+            mo.md("### Parent"),
+            x_slider,
+            y_slider,
+            mo.md(f"I see **child_1.v** = {embed_1_result.defs['v']}"),
+            mo.md(f"I see **child_2.a** = {embed_2_result.defs['a']}"),
+            embed_1_result.output,
+            embed_2_result.output,
+        ])
+    )
+    return
+
+
+@app.cell
+def _():
+    return
+
+
+if __name__ == "__main__":
+    app.run()