🏠 back to Observable

Easier embedding

To make embedding notebooks more convenient, we’ve introduced a new feature that generates the code snippet you need to embed a cell in any web page.

To use, click Embed code on the named cell you want to embed:

Then copy-paste the provided code into your web page:

And that’s it. Let us know what you think! :pray:

8 Likes
  • The description still reads: " Copy this code to embed this notebook in any web page.". Should be something like “cell”, “snippet” etc, although I’d be careful to phrase it in a way that can be understood without knowledge of Observable concepts (“section”?).
  • I’d argue that the option should be present on unnamed cells, but disabled (perhaps with a title attr text that explains that only named cells can be embedded). Someone unfamiliar with Observable won’t have a clue what “named” cells are, especially if they return a DOM node.
  • Midterm I’d love to see the option to select multiple cells for embedding.
  • Can the embed option also be provided on the notebook level?
  • Perhaps a default stylesheet could be included into the snippet (or added as an option to the embed dialog)?
3 Likes

Fantastic! It would be cool to set min-height to something meaningful (by default), so we can try and avoid a flash. I know it’s impossible to know in advance what the final height will be (and it can even change…), but 0 is definitely wrong :slight_smile:

It can also be useful to add a link to the inspector CSS
<link href="https://cdn.jsdelivr.net/npm/@observablehq/inspector@3/dist/inspector.css" rel="stylesheet"/>

1 Like

If I’m not mistaken, there a few minutes latency between the update of the code in observable and the update of the code on https://api.observablehq.com/

Per this thread: Embedding multiple cells from notebook into a React App the code returned by this feature currently isn’t correct for viewof cells (I think it should contain name === "viewof X", not name === "X").

Yes, there’s currently a 30 second cache — so you may have to wait up to half a minute to see the latest published version of your notebook.

Ok, thank you for the clarification.

Also, newbies like me, to the node (or javascript in general) world should remember to clear yarn’s cache when doing some development.

1 Like