Javascript export & embed cells

Help
1

It is now possible to download notebooks as JS files.

I’m not entirely sure I understand what we can do with the JS export. Can we use it to embed a visualization? If so, how?

My goal is to:

  1. Download an Observable notebook as JavaScript.
  2. Publish it on GitHub Pages.
  3. Embed only specific cells from that notebook in another web page.

Some unsuccessful tests here : GitHub - neocarto/test_observable · GitHub

I’d be grateful for any explanations!

2

We’ll have more documentation for this when we ship the embeds feature. Sorry I don’t have a better notebook to point you to now, but in the meantime, here are a few hints.

First, you need to use Notebook Kit Runtime API to render the notebook; this provides not just the runtime but the standard library needed by notebooks. So your import can look something like this:

import {NotebookRuntime} from "https://cdn.jsdelivr.net/npm/@observablehq/notebook-kit@2/runtime/+esm";
import {Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/inspector@5/+esm";

Second, the define function in the exported JavaScript doesn’t currently support a custom observer (the second argument), so you won’t be able to use old style of embed code. But I expect we will change this when we ship the embedding feature to make this easier.

In the meantime, it’s easiest to think of the embed as importing your notebook rather than rendering it directly. That can be done like so:

const runtime = new NotebookRuntime();
const module = runtime.runtime.module(define);
runtime.main.variable(new Inspector(controls)).import("cell 10", module);
runtime.main.variable(new Inspector(map)).import("cell 5", module);

But again this will likely be simplified when we ship embeds.