Skip to main content

pyobservablejs

pyobservablejs renders Observable JavaScript notebooks from Python and connects the two runtimes. It does three things:

  1. Creates notebooks. Author Notebook Kit cells from Python, load existing Notebook Kit HTML, or import public observablehq.com notebooks.
  2. Moves values in both directions. Python variables drive the reactive graph in the browser, and rendered browser values synchronize back to Python.
  3. Exposes the dataflow graph. Python can inspect which cell defines each variable, follow dependency edges, and export Mermaid or D2 diagrams.

Each view is an anywidget, so notebooks render in any anywidget host: JupyterLab, marimo, VS Code notebooks, Google Colab, and others. The live examples on this site run in marimo.

Hover a dot to inspect a measurement. Plot and the penguins sample ship with Notebook Kit.

import marimo as mo
import observablejs as obs

notebook = obs.Notebook(
    obs.js(
        """
        Plot.dot(penguins, {
          x: "culmen_length_mm",
          y: "culmen_depth_mm",
          fill: "species",
          r: 4,
          tip: {fill: "var(--marimo-island-background)"}
        }).plot({
          height: 320,
          color: {legend: true},
          x: {grid: true, label: "Bill length (mm)"},
          y: {grid: true, label: "Bill depth (mm)"}
        })
        """
    ),
)

full_view = notebook.view()
mo.ui.anywidget(full_view)

Where to go next​