# Embed Previews disappear in Runtime for JavaScript

**URL:** <https://talk.observablehq.com/t/embed-previews-disappear-in-runtime-for-javascript/9379>\
**Category:** Help\
**Created:** [June 10, 2024, 7:52pm UTC](https://talk.observablehq.com/t/embed-previews-disappear-in-runtime-for-javascript/9379 "2024-06-10T19:52:33Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![jefleming](https://avatars.discourse-cdn.com/v4/letter/j/c0e974/32.png) [@jefleming](https://talk.observablehq.com/u/jefleming)\
**Post date:** [June 10, 2024, 7:52pm UTC](https://talk.observablehq.com/t/embed-previews-disappear-in-runtime-for-javascript/9379/1 "2024-06-10T19:52:33Z")

</div>

My previews were showing earlier today. They now show only in Iframe. This runs across all of my Notebooks. Any ideas?

---

<div class="post-metadata">

**Author:** ![Cobus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cobus/32/9670_2.png) [@Cobus](https://talk.observablehq.com/u/Cobus)\
**Post date:** [June 10, 2024, 9:26pm UTC](https://talk.observablehq.com/t/embed-previews-disappear-in-runtime-for-javascript/9379/2 "2024-06-10T21:26:03Z")

</div>

I just checked and my embed previews work for iframe as well as JavaScript. Can you share the notebook so I can have a look? I assume this is a public notebook… or is it a private one with a notebook key?

---

<div class="post-metadata">

**Author:** ![jefleming](https://avatars.discourse-cdn.com/v4/letter/j/c0e974/32.png) [@jefleming](https://talk.observablehq.com/u/jefleming)\
**Post date:** [June 10, 2024, 9:42pm UTC](https://talk.observablehq.com/t/embed-previews-disappear-in-runtime-for-javascript/9379/3 "2024-06-10T21:42:43Z")

</div>

HI Cobus,

It’s a private notebook with a key. I could try replicating this with a public notebook if that would help.

This very simple notebook fails to preview but shows fine when embedded in a Squarespace page: [Test for embedding / ET | Observable](https://observablehq.com/d/2add94abe02229d3). It is not dynamic.

This Notebook shows no preview and fails to fetch when embedded in a Squarespace page: [Tree Hierarchy / ET | Observable](https://observablehq.com/d/72ac1816c7e0a725).

I’ll pay a king’s ransom for what will surely be a simple solution.

Best,

John

---

<div class="post-metadata">

**Author:** ![Cobus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cobus/32/9670_2.png) [@Cobus](https://talk.observablehq.com/u/Cobus)\
**Post date:** [June 10, 2024, 10:34pm UTC](https://talk.observablehq.com/t/embed-previews-disappear-in-runtime-for-javascript/9379/4 "2024-06-10T22:34:53Z")

</div>

No king’s ransom required yet… 🙂  
Both of these embeds work for me… here is a video.

---

<div class="post-metadata">

**Author:** ![Cobus](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/cobus/32/9670_2.png) [@Cobus](https://talk.observablehq.com/u/Cobus)\
**Post date:** [June 11, 2024, 1:10am UTC](https://talk.observablehq.com/t/embed-previews-disappear-in-runtime-for-javascript/9379/5 "2024-06-11T01:10:42Z")

</div>

Could you share what you see? Also, do you perhaps have any plugins that may block the JavaScript embeds?

---

<div class="post-metadata">

**Author:** ![jefleming](https://avatars.discourse-cdn.com/v4/letter/j/c0e974/32.png) [@jefleming](https://talk.observablehq.com/u/jefleming)\
**Post date:** [June 11, 2024, 5:14am UTC](https://talk.observablehq.com/t/embed-previews-disappear-in-runtime-for-javascript/9379/6 "2024-06-11T05:14:38Z")

</div>

Hi Cobus,

Please see attached. I’ll have to start digging on plugins. Not that I’m aware of, and it worked earlier, then just stopped.

(Attachment Screen Recording 2024-06-11 at 1.10.12 AM.mov is missing)

---

<div class="post-metadata">

**Author:** ![jefleming](https://avatars.discourse-cdn.com/v4/letter/j/c0e974/32.png) [@jefleming](https://talk.observablehq.com/u/jefleming)\
**Post date:** [June 11, 2024, 5:20am UTC](https://talk.observablehq.com/t/embed-previews-disappear-in-runtime-for-javascript/9379/7 "2024-06-11T05:20:31Z")

</div>

This should work.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [June 11, 2024, 9:29am UTC](https://talk.observablehq.com/t/embed-previews-disappear-in-runtime-for-javascript/9379/8 "2024-06-11T09:29:30Z")

</div>

`<script>` tags are not supported in Observable notebooks, and you don’t need to include Observable’s Runtime here - it’s already part of the notebook environment.

For JavaScript embeds you can instantiate your notebook by using the code that is shown in the embed modal.

I suspect that the reason you see no output in your recording is that you use side effects in your notebook (e.g. one cell modifying another cell’s output via document.querySelectorAll or d3.select).  
Using side effects also means that your notebook may appear to be working until the next time you reload it.

Alternatively you may want to check your browser’s devtools console for any JavaScript errors.

* * *

Also, can you share the steps that led you to try the “runtime-v1.js” inclusion? There are several aspects that make me wonder if those instructions were provided by ChatGPT or a similar service:

- this URL has never existed
- Observable’s Runtime is at v5
- including the Runtime via a script tag was never supported (as far as I’m aware)

---

<div class="post-metadata">

**Author:** ![jefleming](https://avatars.discourse-cdn.com/v4/letter/j/c0e974/32.png) [@jefleming](https://talk.observablehq.com/u/jefleming)\
**Post date:** [June 11, 2024, 4:05pm UTC](https://talk.observablehq.com/t/embed-previews-disappear-in-runtime-for-javascript/9379/9 "2024-06-11T16:05:56Z")

</div>

Thanks a ton. Super helpful. Yes, I now see that the Runtime is already part of the notebook environment. Makes sense and I see it now. All Chatbots suggest this, unfortunately.

I have not identified any side effects. My code is a slightly modifed version of Mike Bostock’s Collapsable Tree.

I receive the following error when trying to embed:

Refused to load the font ‘data:font/woff2;base64,…’ because it violates the following Content Security Policy directive: “font-src [https://fonts.gstatic.com](https://fonts.gstatic.com) [https://use.fontawesome.com](https://use.fontawesome.com)”.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [June 11, 2024, 7:03pm UTC](https://talk.observablehq.com/t/embed-previews-disappear-in-runtime-for-javascript/9379/10 "2024-06-11T19:03:10Z")

</div>

Can you share your notebook (or a simplified version of it)?

---

<div class="post-metadata">

**Author:** ![jefleming](https://avatars.discourse-cdn.com/v4/letter/j/c0e974/32.png) [@jefleming](https://talk.observablehq.com/u/jefleming)\
**Post date:** [June 11, 2024, 9:01pm UTC](https://talk.observablehq.com/t/embed-previews-disappear-in-runtime-for-javascript/9379/11 "2024-06-11T21:01:59Z")

</div>

Sure, here you go!

[https://observablehq.com/d/72ac1816c7e0a725](https://observablehq.com/d/72ac1816c7e0a725)

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [June 11, 2024, 9:22pm UTC](https://talk.observablehq.com/t/embed-previews-disappear-in-runtime-for-javascript/9379/12 "2024-06-11T21:22:58Z")

</div>

I can’t reproduce the issue that your recording shows. Could you check if you encounter the same problem in a private/incognito window? Also, what browser are you using?

---

<div class="post-metadata">

**Author:** ![jefleming](https://avatars.discourse-cdn.com/v4/letter/j/c0e974/32.png) [@jefleming](https://talk.observablehq.com/u/jefleming)\
**Post date:** [June 11, 2024, 10:26pm UTC](https://talk.observablehq.com/t/embed-previews-disappear-in-runtime-for-javascript/9379/13 "2024-06-11T22:26:27Z")

</div>

Good suggestions. I’m using Chrome Version 125.0.6422.142 (most recent).

I tried several Notebooks in Incognito. The small one I shared with you is fine. Others that rely on attached files: “RuntimeError: Failed to fetch”. I have asked a colleague to try the same exercise to see if it’s a browser issue.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [June 11, 2024, 11:03pm UTC](https://talk.observablehq.com/t/embed-previews-disappear-in-runtime-for-javascript/9379/14 "2024-06-11T23:03:15Z")

</div>

I see, you’re trying to create a JS embed for a private notebook (it seems I missed that you mentioned this detail earlier, sorry).

I’m afraid due to technical limitations we currently only support file attachments in private notebooks through iframe embeds. You would either have to use an iframe embed or make your notebook unlisted.

---

<div class="post-metadata">

**Author:** ![jefleming](https://avatars.discourse-cdn.com/v4/letter/j/c0e974/32.png) [@jefleming](https://talk.observablehq.com/u/jefleming)\
**Post date:** [June 12, 2024, 12:17am UTC](https://talk.observablehq.com/t/embed-previews-disappear-in-runtime-for-javascript/9379/15 "2024-06-12T00:17:40Z")

</div>

Problem solved. I understand completely. It makes sense for data security. I hope the current technical limitations are worked through in the near future.

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [June 12, 2024, 9:36am UTC](https://talk.observablehq.com/t/embed-previews-disappear-in-runtime-for-javascript/9379/16 "2024-06-12T09:36:07Z")

</div>

For what it’s worth, you can also download the notebook as a tarball (from the notebook menu via “Export” \> “Download code”) and host the files yourself.

> [@jefleming](#):
>
> All Chatbots suggest this, unfortunately.

Could you share the prompt that you used?

---

<div class="post-metadata">

**Author:** ![jefleming](https://avatars.discourse-cdn.com/v4/letter/j/c0e974/32.png) [@jefleming](https://talk.observablehq.com/u/jefleming)\
**Post date:** [June 12, 2024, 7:10pm UTC](https://talk.observablehq.com/t/embed-previews-disappear-in-runtime-for-javascript/9379/17 "2024-06-12T19:10:44Z")

</div>

They were all to the effect of: What are the steps to embed an Observable Notebook in a website using Runtime for JavaScript?

---

<div class="post-metadata">

**Author:** ![mootari](https://yyz2.discourse-cdn.com/flex030/user_avatar/talk.observablehq.com/mootari/32/581_2.png) [@mootari](https://talk.observablehq.com/u/mootari)\
**Post date:** [June 12, 2024, 8:11pm UTC](https://talk.observablehq.com/t/embed-previews-disappear-in-runtime-for-javascript/9379/18 "2024-06-12T20:11:36Z")

</div>

Then I’m relieved, because when I tried that prompt with ChatGPT it only got the Runtime version wrong (4 instead of 5), but everything else looked correct. 🙂