2c:["$","title",null,{"children":"Advanced embedding and downloading | Observable | Observable"}] 31: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 ~~~32:[{"id":"fc09bd06afec513a17fd0307631db89669916563522226a80b8d80dc1d725874903ca937523cad1e7b687ad3cf9a2c4276372fe1c8a6e13da06704b6f10f371f","href":"https://static.observableusercontent.com/files/fc09bd06afec513a17fd0307631db89669916563522226a80b8d80dc1d725874903ca937523cad1e7b687ad3cf9a2c4276372fe1c8a6e13da06704b6f10f371f","name":"books.png","type":"image/png","lastModified":1572462558464.143,"size":187300},{"id":"7d971069b132d5677828ec93de1fc744f1eca03f4b853e1495aa4ec5a78bdbe7ba4798606449c6e18d39367360cdf9e05b8e34a94375bf85d5e442c8d40b8dae","href":"https://static.observableusercontent.com/files/7d971069b132d5677828ec93de1fc744f1eca03f4b853e1495aa4ec5a78bdbe7ba4798606449c6e18d39367360cdf9e05b8e34a94375bf85d5e442c8d40b8dae","name":"breakout.png","type":"image/png","lastModified":1572465381104.565,"size":289675},{"id":"7259795c0542cbf685daa8e51b926c87e9fa774bce3947e1c2e26095183cc9443921fe2c0f30af59f9f4c8ad7590924dcd45eabaf597d27aa5b1292169ee4c9c","href":"https://static.observableusercontent.com/files/7259795c0542cbf685daa8e51b926c87e9fa774bce3947e1c2e26095183cc9443921fe2c0f30af59f9f4c8ad7590924dcd45eabaf597d27aa5b1292169ee4c9c","name":"new.png","type":"image/png","lastModified":1572465358282.648,"size":44522},{"id":"13c14588354d7f2c5d7d0eb616865cfb521940dc03b9872ba5b9139b2e4637cff28da59ab7531a77e08b16429d023ee9bf31708d542367cc854a6be61e01bc49","href":"https://static.observableusercontent.com/files/13c14588354d7f2c5d7d0eb616865cfb521940dc03b9872ba5b9139b2e4637cff28da59ab7531a77e08b16429d023ee9bf31708d542367cc854a6be61e01bc49","name":"dropdown.png","type":"image/png","lastModified":1572465337351.416,"size":33079},{"id":"235ae28aaa67a5b1da0ce90f841284aa39b1724731bf0b707c2562973daf354f201b49186d9579cafc44299da41be2d03d0617c8f8b9e0921eaa35fe79c1f17b","href":"https://static.observableusercontent.com/files/235ae28aaa67a5b1da0ce90f841284aa39b1724731bf0b707c2562973daf354f201b49186d9579cafc44299da41be2d03d0617c8f8b9e0921eaa35fe79c1f17b","name":"image.png","type":"image/png","lastModified":1586397922580.959,"size":1834855}] 2f:{"id":"c2a04e7b9a9d03bb","slug":"advanced-embeds","title":"Advanced embedding and downloading","thumbnail":"eb61aeae669f9511298a6c24a76fda304af4507e1c158d5e872cd35f844d275d","access_level":"unlisted","create_time":"$D2018-05-09T22:05:44.925Z","update_time":"$D2023-09-19T20:51:24.932Z","view_time":null,"first_public_time":"$D2018-05-21T18:26:40.752Z","fork":false,"stars":362,"starred":false,"owner":{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024"},"version":1230,"publish_version":null,"role":null,"authored":false,"authors":[],"members":[{"type":"group","id":"c4990be612f2da51","login":"8788045797a2fd14","name":"Product Education","avatar_url":null,"tier":"public","role":"editor"},{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null,"role":"editor"},{"type":"team","id":"f35c755083683fe5","login":"observablehq","name":"Observable","avatar_url":"https://avatars-next.observableusercontent.com/424c6c1f7794371c9915a160519bdfb34cf34e50069fcd6def38a1a04d4e9702","tier":"enterprise_2024","role":"viewer"}],"comments":[{"id":"1bd9ff7d08aaea0a","reply_to_id":null,"content":"Just what I was looking for 👏🏼. I could be useful to include options in the handy embed code generator for modifying cell values...","create_time":"$D2020-08-19T22:26:51.861Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null}},{"id":"e702df6b3ce18ecb","reply_to_id":"1bd9ff7d08aaea0a","content":"Great to hear! What might that look like in the handy embed generator, the option to generate code that redefined a cell with an example value?","create_time":"$D2020-08-19T22:46:27.120Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"4c607438c80998ad","login":"ballingt","name":"Thomas Ballinger","avatar_url":"https://avatars-next.observableusercontent.com/fdc16c011489d914c05fa5992a7992413727fc69e4f73671ec38919807f547e7","tier":null}},{"id":"83ae524295d0bd04","reply_to_id":"1bd9ff7d08aaea0a","content":"I would say a second optional section, where you can also select select which cells you would like to override and the tool generates some placeholder code for redefining the cell value. The cell selector should have an option for selecting the width, and people choose one that use the snippet above modifying the standard Library","create_time":"$D2020-08-20T21:00:31.150Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null}},{"id":"b701eb9c6f72c55e","reply_to_id":"1bd9ff7d08aaea0a","content":"Even better, use some code close to @toja's https://observablehq.com/@toja/custom-notebook-width","create_time":"$D2020-08-27T02:06:35.065Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"be0076fec73aa550","login":"john-guerra","name":"John Alexis Guerra Gómez","avatar_url":"https://avatars-next.observableusercontent.com/21638cee44bb0ea70798da725b57111a5d3e2acebcd14524565992f7d1594aed","tier":null}},{"id":"cb52ab77f3ce4e8a","reply_to_id":null,"content":"Its not totally obvious but if you want to materialize a viewof, the cell name is \"viewof \"","create_time":"$D2021-09-07T09:50:38.776Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"5215f6ec4a999d40","login":"tomlarkworthy","name":"Tom Larkworthy","avatar_url":"https://avatars-next.observableusercontent.com/47327a8bc1966f2186dcb3ebf4b7ee6e4e7ab9a5c2a07405aff57200ea778f71","tier":null}},{"id":"5708bde7b8354daf","reply_to_id":null,"content":"The page linked as \"a plain web page that embeds the graphic cell above\" doesn't show any of the embedded content.","create_time":"$D2022-01-08T10:58:14.736Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"34f017cf3f269f4d","login":"ershov","name":"Yury Ershov","avatar_url":"https://avatars-next.observableusercontent.com/50be16114d5f16fd20c691225ab67f7cd113e5e275231c642d16effe70a0a2d0","tier":null}},{"id":"b8d153966fe49a13","reply_to_id":"5708bde7b8354daf","content":"You should see something like this:\n\nhttps://user-images.githubusercontent.com/230541/148653160-28461af3-4dfc-48dc-8cf7-9ed395f4d066.png\n\nAre you seeing something else?","create_time":"$D2022-01-08T17:09:14.816Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"074c414ad1d825f5","login":"mbostock","name":"Mike Bostock","avatar_url":"https://avatars-next.observableusercontent.com/7dbba99ced40bd5ab8013c99b1a11da61231bce321ba1148a9d16ad0f121550a","tier":null}},{"id":"be81507a3463912b","reply_to_id":"5708bde7b8354daf","content":"Hi Mike,\nThank you for your response. That was an error caused by my local proxy. Sorry for confusion.","create_time":"$D2022-01-12T05:43:08.187Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"34f017cf3f269f4d","login":"ershov","name":"Yury Ershov","avatar_url":"https://avatars-next.observableusercontent.com/50be16114d5f16fd20c691225ab67f7cd113e5e275231c642d16effe70a0a2d0","tier":null}},{"id":"df9d96ed8518cd5b","reply_to_id":null,"content":"Backticks aren't working here with backslashes before them, I don't think....?","create_time":"$D2022-09-07T01:18:06.883Z","update_time":null,"resolved":true,"user":{"type":"individual","id":"b33d0193559da90f","login":"phocks","name":"Joshua Byrd","avatar_url":"https://avatars-next.observableusercontent.com/7236cb241197306d9aacd9555cbf1d77461b5e74cfdd73beff07a9bc5173ba11","tier":null}},{"id":"01ace7ef8cec8410","reply_to_id":null,"content":"Can also dynamically import notebooks now with node's --experimental-network-imports.","create_time":"$D2023-02-18T23:57:44.180Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"dbf69c13a14d2f62","login":"visnup","name":"Visnu Pitiyanuvath","avatar_url":"https://avatars-next.observableusercontent.com/b847c4c49993b1df7599d355f47dc0ad9c2dcf43439ce9e8f3410e6368b3aac9","tier":null}},{"id":"711f056926c3e7bd","reply_to_id":null,"content":"This section needs to be redone. redefine() expects a cell *definition*, i.e. a function that injects all inputs into the cell's scope and returns the actual value. I'd also expect cells with inputs to be more common, so our examples should probably focus on that.","create_time":"$D2023-03-03T10:19:01.941Z","update_time":"$D2023-03-03T10:19:50.959Z","resolved":false,"user":{"type":"individual","id":"07362516b5994994","login":"mootari","name":"Fabian Iwand","avatar_url":"https://avatars-next.observableusercontent.com/0d7defa821f38094c03bad23b9b360a5364e6e97e21fc238c39ddc48db7994ad","tier":null}}],"custom_thumbnail":true,"trashed":false,"subscribed":null,"forks":161,"collection":{"id":"ea752d8349ed8254","slug":"embedding-notebooks","title":"Embedding Notebooks","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"type":"notebook","body":{"title":"Advanced embedding and downloading","cells":[{"id":577,"value":"# Advanced embedding and downloading","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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"},{"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"},{"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"},{"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"},{"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"},{"id":1002,"value":"","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$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"},{"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"},{"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"},{"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"},{"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"},{"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"},{"id":617,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$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"},{"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"},{"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"},{"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"},{"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"},{"id":1165,"value":"Note that CSS `