2e:null 2f:["$","title",null,{"children":"Advanced Embedding and Downloading | GfK Displayr Engineering | Observable"}] 34:T42c,## Rendering cells The most obvious way to embed a notebook is to display its contents, live, in a web page. For this, the Observable runtime includes a [standard inspector](https://github.com/observablehq/inspector); it takes live values from the notebook and puts them into your HTML where you want them. For example, here’s an expanded view of the code the Embed tool gives you to render a notebook into an empty body ([see it live](https://bl.ocks.org/mbostock/raw/1cf3e863b054aca0bc7061b5292120ab/)): ~~~html ~~~35:[{"id":"7d971069b132d5677828ec93de1fc744f1eca03f4b853e1495aa4ec5a78bdbe7ba4798606449c6e18d39367360cdf9e05b8e34a94375bf85d5e442c8d40b8dae","href":"https://static.observableusercontent.com/files/7d971069b132d5677828ec93de1fc744f1eca03f4b853e1495aa4ec5a78bdbe7ba4798606449c6e18d39367360cdf9e05b8e34a94375bf85d5e442c8d40b8dae","name":"breakout.png","type":"image/png","lastModified":1661247295157.819,"size":289675},{"id":"7259795c0542cbf685daa8e51b926c87e9fa774bce3947e1c2e26095183cc9443921fe2c0f30af59f9f4c8ad7590924dcd45eabaf597d27aa5b1292169ee4c9c","href":"https://static.observableusercontent.com/files/7259795c0542cbf685daa8e51b926c87e9fa774bce3947e1c2e26095183cc9443921fe2c0f30af59f9f4c8ad7590924dcd45eabaf597d27aa5b1292169ee4c9c","name":"new.png","type":"image/png","lastModified":1661247295157.819,"size":44522},{"id":"fc09bd06afec513a17fd0307631db89669916563522226a80b8d80dc1d725874903ca937523cad1e7b687ad3cf9a2c4276372fe1c8a6e13da06704b6f10f371f","href":"https://static.observableusercontent.com/files/fc09bd06afec513a17fd0307631db89669916563522226a80b8d80dc1d725874903ca937523cad1e7b687ad3cf9a2c4276372fe1c8a6e13da06704b6f10f371f","name":"books.png","type":"image/png","lastModified":1661247295157.819,"size":187300}] 32:{"id":"04cd58a91ba81949","slug":"advanced-embedding-and-downloading","title":"Advanced Embedding and Downloading","thumbnail":"60445fa47a7372821bdad40bdad80757e1cca8364b70247db5c12afe23332083","access_level":"public","create_time":"$D2022-08-23T09:34:55.157Z","update_time":"$D2022-09-29T14:29:10.605Z","view_time":null,"first_public_time":"$D2022-09-29T14:29:19.006Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"8c12bab1432233fa","login":"gfk-displayr-eng","name":"GfK Displayr Engineering","avatar_url":"https://avatars-next.observableusercontent.com/1892c62d3af77b29e59be03cc9cf987ec074cf236e9dbf9d0339195e3382023d","tier":"starter_2024"},"version":1230,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f60395cebced3c6c","login":"mtsvelik","name":"Misha Tsvelik","avatar_url":"https://avatars-next.observableusercontent.com/9ef83be769fccaa60175b65abcb8fb329e45720c0290ca484f36e9cbd8d70073","tier":null}],"members":[{"type":"team","id":"8c12bab1432233fa","login":"gfk-displayr-eng","name":"GfK Displayr Engineering","avatar_url":"https://avatars-next.observableusercontent.com/1892c62d3af77b29e59be03cc9cf987ec074cf236e9dbf9d0339195e3382023d","tier":"starter_2024","role":"editor"},{"type":"individual","id":"f60395cebced3c6c","login":"mtsvelik","name":"Misha Tsvelik","avatar_url":"https://avatars-next.observableusercontent.com/9ef83be769fccaa60175b65abcb8fb329e45720c0290ca484f36e9cbd8d70073","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"7c9db241ab46c6bd","slug":"we-innovate-2022-tutorials","title":"we.innovate 2022 / tutorials","owner":{"id":"8c12bab1432233fa","login":"gfk-displayr-eng","name":"GfK Displayr Engineering"}},"type":"notebook","body":{"title":"Advanced Embedding and Downloading","cells":[{"id":577,"value":"# Advanced Embedding and Downloading\n\n

A notebook is a portable module that can integrate with an application’s data and UI.

\n\n

Illustration: [ClipArt ETC](http://etc.usf.edu/clipart/54200/54238/54238_book_pile.htm)

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1126,"value":"So, you’ve written your magnum opus: a notebook full of splendor and delight. Maybe you’ve embedded it on your blog for all to see. Now, the problem is — How do you integrate its nifty charts into your web app? How do you save it to your hard drive, to file away for posterity alongside your old Word documents and vacation photos?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"intro","database":"$undefined"},{"id":1128,"value":"As you’ve probably noticed by now, Observable notebooks are a little different than the regular old JavaScripts you know and love. They execute in order of [data flow](/@observablehq/how-observable-runs) rather than in a linear sequence of statements, and contain strange and marvelous reactive primitives, like [viewof](/@observablehq/introduction-to-views) and [mutable](/@observablehq/introduction-to-mutable-state).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"Luckily, Observable provides an [open-source runtime](https://github.com/observablehq/runtime) which stitches together a notebook’s cells into a dependency graph and brings them to life through evaluation; a [standard library](https://github.com/observablehq/stdlib), which provides helpful functions for working with HTML, SVG, generators, files and promises among [other useful sundries](/@observablehq/standard-library); and an [inspector](https://github.com/observablehq/inspector), which implements the default strategy for rendering DOM and JavaScript values into a live web page — although you’re free to write your own.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":999,"value":"## Embedding a cell on a web page\n\nIn the [introduction to embedding](/@observablehq/embeds), you saw how named cells from any published or shared notebook — a chart, a visualization, a widget — are quick and easy to embed.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1135,"value":"Click **Embed** in the menu to the left of the cell below to open the Embed tool. The default Iframe method is fairly self-contained; this time, select **Runtime with JavaScript** from the dropdown so we can dive into it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1002,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"graphic","database":"$undefined"},{"id":1144,"value":"By default, the embed code loads the latest published version of the notebook. When you publish a new version of the notebook on Observable, your embedded cells will update immediately (or at least, within 30 seconds).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1028,"value":"If you want to lock your embed code to a specific published version, you can add `@version` to your notebook’s ES module URL — and you can always find specific published versions [in your notebook history](/@observablehq/history).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1145,"value":"Here’s a link to [a plain web page that embeds the \\`graphic\\` cell above](https://observablehq.github.io/examples/versioning/), from two different versions of this notebook, hosted off-site.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":291,"value":"## Notebooks as ES modules\n\nYour notebook can be compiled and downloaded as a [JavaScript module](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/)! Click **Download code** in the notebook menu to download your compiled notebook, including the Observable runtime, any imported notebooks, and an HTML template to demonstrate how to run your notebook.\n\n $\"Screen$ ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1152,"value":"Alternatively, you can “hot link” your code directly from Observable, as long as you’ve published your notebook or enabled link sharing:\n\n~~~\nhttps://api.observablehq.com/@jashkenas/my-neat-notebook.js?v=3\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1150,"value":"You can use this module to run your notebook in any JavaScript environment. In this form, notebooks are true JavaScript programs that you can manipulate and integrate deeply with your application. Now let’s explore some ways to use embedded notebooks!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":617,"value":"$34","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":311,"value":"The inspector doesn’t include any inline styles, but there is a [default stylesheet](https://cdn.jsdelivr.net/npm/@observablehq/inspector@3/dist/inspector.css) ([see source](https://github.com/observablehq/inspector/blob/master/src/style.css)) if you want it. To make your embedded notebook beautiful, try a CSS framework. We favor [Tachyons](http://tachyons.io/) here at Observable, but there are lots of good choices, such as GitHub’s [Primer](https://primer.style/css).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1161,"value":"If you don’t want to render the entire notebook, define a custom function to control which cells are rendered and where they go. For example, to render just the cell named “chart” into the DOM element with the same id, say:\n\n~~~js\nnew Runtime().module(notebook, name => {\n if (name === \"chart\") {\n return new Inspector(document.querySelector(\"#chart\"));\n }\n});\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1163,"value":"It’s important to note that when you render a limited set of cells from your notebook, the cells that aren’t used — or depended on by those that are — won’t be run at all!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":792,"value":"Sometimes a cell that’s not referenced has important side effects, as in the [Sortable Bar Chart](https://observablehq.com/@d3/sortable-bar-chart), where an \\`update\\` cell passes data to the chart via a method that mutates the existing DOM element. If you want to run a cell with side effects in the background of your embedded notebook, you can return \\`true\\` instead of an inspector for those cells:\n\n~~~js\n(new Runtime).module(define, name => {\n if (name === \"chart\") return Inspector.into(\".chart\")();\n if (name === \"update\") return true;\n});\n~~~","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1167,"value":"The code generated by the Embed tool uses this technique to run any cells that refer to one of the cells you’re embedding. If that’s over-eager, you can delete the line.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1165,"value":"Note that CSS `