Embedded notebook lacks interactive controls

1

Hi, newbie here. I’m really excited about the embedding feature. I copied the example from Jeremy’s article and have an html file that looks like this:

<head>
<script type="module">
  import {Runtime, Inspector} from "https://unpkg.com/@observablehq/notebook-runtime?module";
  import notebook from "https://api.observablehq.com/@marcacohen/d3-force-directed- 
  graph.js?key=REDACTED";
  Runtime.load(notebook, Inspector.into(document.body));
</script>
</head>
<body>
Blah
</body>

This evaluates the notebook cells but doesn’t display the left hand column of editing controls, the caret to open and change a cell’s contents, etc. Should I get that by default or do I need to implement more code?

2

Hi Marc,

Yep - embeds are meant to be a way to put a notebook’s outputs on any webpage. For example, if you’ve been working on a chart and then want to embed it in a newspaper article, you can use an embed to easily do that.

They don’t include the editing UI or any of the other Observable application functionality - if you want to present the notebook with those things, a link to the notebook’s page on Observable is the best way. That way, people can make edits and save or fork them if they come up with something cool.

-Tom

3

Ah, I see. We have a tool that builds web based tutorials directly from Google Docs (https://github.com/googlecodelabs/tools) and I was hoping to embed interactive coding cells into these tutorials (you know, like “Now try running the code yourself here…”). For building pedagogical systems I see a lot of value in embedding the editing capabilities along with the cell display because it enables lots of great “try this” experiences.

Perhaps something to think about for the future. Thanks for the quick reply, Tom!

1 Like