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.

3

Thank you very much for this response. I appreciate you taking the time to explain it to me.

4

So, this is what I end up with.

https://neocarto.github.io/test_observable/index2.html

I’m afraid I haven’t quite understood (sorry about that). Do we need to wait for your upcoming developments to be able to render the notebook?

5

Try importing the named variables (svg and k) you want to display, not the cell variables (cell 10, cell 5). The cell variables are more of a hidden implementation artifact.

You won’t be able to render the input this way, though. You’d need to expose the input as a separate variable (say kInput) from its value (k) if you want to display it after importing.