Skip to main content

pyobservablejs

Build reactive notebooks from Python. Connect data to JavaScript charts, inputs, and text, then display the notebook or selected cells.

Notebook Kit evaluates cells in the browser. anywidget connects their values to Python in JupyterLab, marimo, VS Code, and Colab.

pip install pyobservablejsRead the quickstart →
📓 Build Observable notebooks in PythonCombine JavaScript, Observable JavaScript, Markdown, HTML, inputs, and files.
↔️ Sync Python and browser stateSend values from Python, share browser inputs across views, and read settled results back.
🧩 Embed complete or focused viewsRender in JupyterLab, marimo, VS Code, Colab, and other anywidget hosts.

A reactive notebook

Choose a species. The Markdown result and Plot chart update together in the browser.

Python source

import observablejs as obs

notebook = obs.Notebook(
    obs.md("## Palmer penguins"),
    obs.js(
        """
        const species = view(Inputs.select(
          ["All", "Adelie", "Chinstrap", "Gentoo"],
          {label: "Species", value: "All"}
        ));
        """
    ),
    obs.js(
        """
        const selected = species === "All"
          ? penguins
          : penguins.filter((d) => d.species === species);
        """,
        display=False,
    ),
    obs.js(
        """
        const label = species === "All"
          ? "penguins"
          : `${species} penguins`;

        display(md`**${selected.length} ${label}**`);

        display(Plot.dot(selected, {
            x: "culmen_length_mm",
            y: "culmen_depth_mm",
            fill: "species",
            tip: {
              fill: "var(--marimo-island-background)"
            }
          }).plot({
            width,
            height: 460,
            x: {label: "Bill length (mm)"},
            y: {label: "Bill depth (mm)"},
            color: {legend: true}
          })
        );
        """
    ),
)

notebook.view()

Rendered notebook