Load Notebook Kit HTML

Notebook.from_html creates a source-backed notebook from a Notebook Kit HTML string. Define the string in Python, read it from a file, fetch it from storage, or receive it from another API before construction. The example uses Notebook Kit's built-in AAPL sample.

Imported cells run with the host page's browser privileges. Review the trust boundary in Browser execution.

import marimo as mo
import observablejs as obs

source = """
<notebook theme="glacier">
  <script type="text/markdown">
# Apple closing price
  </script>
  <script type="module">
Plot.areaY(aapl, {
  x: "Date",
  y: "Close",
  tip: {
    // This example references a theme variable used by mdx-marimo.
    // Replace it with a CSS color or remove `fill` in another host.
    fill: "var(--marimo-island-background)"
  }
}).plot({
  height: 280,
  y: {grid: true, label: "Close ($)"}
})
  </script>
</notebook>
"""

notebook = obs.Notebook.from_html(source)
full_view = notebook.view()
mo.ui.anywidget(full_view)

The widget preserves the glacier theme and renders the built-in AAPL sample as an area chart.

Source-backed notebooks

A notebook loaded from HTML keeps that Notebook Kit document as its definition. Its theme comes from the document. Assigning notebook.theme raises traitlets.TraitError.

Everything else works the same as a Python-authored notebook: view() creates renderable views, variables overrides named values, and readback synchronizes after render.

notebook = obs.Notebook.from_html(source, variables={"threshold": 0.5})

Load from a file

Read the document with Python, then pass its text to Notebook.from_html:

from pathlib import Path

import observablejs as obs

path = Path("notebooks/report.html")
source = path.read_text(encoding="utf-8")
notebook = obs.Notebook.from_html(source)

When the document references local files through FileAttachment or imports local JavaScript modules, pass the directory that should resolve those paths:

notebook = obs.Notebook.from_html(
    source,
    base_path=path.parent,
    embed_file_attachments=True,
    rewrite_imports=True,
)

See Add files and local modules for how discovery and embedding work, and the Load an existing notebook with local files recipe for a complete live example.

Round trip

notebook.to_notebook_html() returns the Notebook Kit document for any notebook, so HTML can round-trip through Python. See Export Notebook Kit HTML.

Source constructors defines the full contract, including accepted source shapes and error behavior.