Easier embedding

Announcements
1

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:

17%20PM
17%20PM2452×1648 470 KB

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

44%20PM
44%20PM2452×1648 518 KB

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

8 Likes
2
  • 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
3

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:

4

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
6

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/

7

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").

Edit: fixed!

8

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.

9

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