Skip to main content

pyobservablejs

Build reactive Observable notebooks from Python. Compose JavaScript, Observable JavaScript, Markdown, HTML, inputs, and files, then display the complete notebook or selected cells in anywidget hosts.

Notebook Kit evaluates each view in the browser. Python owns notebook construction, shared values, files, and state readback.

uv 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: true
          }).plot({
            width,
            height: 460,
            x: {label: "Bill length (mm)"},
            y: {label: "Bill depth (mm)"},
            color: {legend: true}
          })
        );
        """
    ),
)

notebook.view()

Rendered notebook