43:["$","title",null,{"children":"Downloading and Embedding Notebooks | Yuichi Yazaki | Observable"}] 4b:T727,md`# Downloading and Embedding Notebooks

**tl;dr** *[Notebooks can be embedded and customized](http://ashkenas.com/breakout/) anywhere on the web (or off it).* So, you’ve written your magnum opus: an awesome notebook full of splendor and delight. Now, the problem is — How do you display it on your website? 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? As you’ve probably noticed by now, Observable notebooks are a little bit different than the regular old JavaScripts you know and love. They execute in order of dependency and data flow rather than in a linear sequence of statements, and contain strange and marvelous reactive primitives, like [viewof](https://beta.observablehq.com/@mbostock/a-brief-introduction-to-viewof) and [mutable](https://beta.observablehq.com/@jashkenas/introduction-to-mutable-state). Luckily, Observable provides an open-source [runtime](https://github.com/observablehq/notebook-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/notebook-stdlib), which provides helpful functions for working with HTML, SVG, generators, files and promises among [other useful sundries](https://beta.observablehq.com/@mbostock/standard-library); and an [inspector](https://github.com/observablehq/notebook-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. We’ll use the Observable runtime to render notebooks outside of observablehq.com.`4c:T508,md`Observable also provides a copy of your notebook as an installable npm module, in gzipped tarball flavor.

Right-clicking and copying that link, will get you something that looks like this:
\`https://api.observablehq.com/@jashkenas/my-neat-notebook.tgz\` You can use this URL to install a notebook into your project with **npm**, **Yarn** or the JavaScript package manager of your choice: \`\`\` npm i https://api.observablehq.com/@jashkenas/my-neat-notebook.tgz yarn add https://api.observablehq.com/@jashkenas/my-neat-notebook.tgz \`\`\` This will install the notebook as a package under its published name ("my-neat-notebook"). Notebooks are versioned with every change that you make, and requests to the Observable API for the ES Module or Tarball will receive the latest published or shared version. If you want to lock your request to a specific version, you can add the version number of any published or shared version of your notebook to the URL: \`\`\` https://api.observablehq.com/@jashkenas/my-neat-notebook@42.js https://api.observablehq.com/@jashkenas/my-neat-notebook@365.tgz \`\`\``4d:[] 47:{"id":"d7245113abd569d5","slug":"downloading-and-embedding-notebooks","title":"Downloading and Embedding Notebooks","thumbnail":"ee1e31302bd235685ee2bb461fec944a3911361c2e473293b655d3bca66e065b","access_level":"public","create_time":"$D2019-02-09T09:11:45.287Z","update_time":"$D2019-02-09T09:11:45.287Z","view_time":null,"first_public_time":"$D2019-02-09T09:11:57.011Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"a1d7ead7944dd327","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":"starter_2024","bio":"Data Visualization Japan\nhttps://www.facebook.com/yuichi.yazaki\nhttps://twitter.com/yuichiyazaki","following":false},"version":525,"publish_version":525,"role":null,"authored":false,"authors":[{"type":"individual","id":"5c68688afd0e935c","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":null,"bio":"Data Visualization Japan\nhttps://www.facebook.com/yuichi.yazaki\nhttps://twitter.com/yuichiyazaki","following":false}],"members":[{"type":"individual","id":"5c68688afd0e935c","login":"visualizingjp","name":"Yuichi Yazaki","avatar_url":"https://avatars-next.observableusercontent.com/1b66e94cecde0c737084a41d3922d6e35b8928922fee6113d4db6432bd161acd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"bd6c82435b1a34bc","slug":"standard-know-how","title":"Standard Know-How","owner":{"id":"a1d7ead7944dd327","login":"visualizingjp","name":"Yuichi Yazaki"}},"type":"notebook","body":{"titling":"auto","title":"Downloading and Embedding Notebooks","cells":[{"id":0,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"iconHeader(\"Notebooks as ES Modules\", ``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"md`After you share or publish a notebook, a copy of it, compiled to JavaScript, may be downloaded or linked as an [ES module](https://hacks.mozilla.org/2018/03/es-modules-a-cartoon-deep-dive/). Click the **Download code** link in a notebook’s menu to retrieve the URL for your notebook.\n\n

\n\nThe URL will look something like this:\n\n\\`https://api.observablehq.com/@jashkenas/my-neat-notebook.js\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"md`\nUsing this ES module version of your notebook, you can run and render cells in any web or JavaScript environment.\n\nHere’s a basic example script that renders every cell in a notebook into an empty HTML page:\n\n\\`\\`\\`html\n\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":281,"value":"md`\\`Runtime.load()\\` takes two or three arguments: a **notebook** module, an optional **builtins** object (which defaults to the Observable [standard library](https://github.com/observablehq/notebook-stdlib)), and an **observer callback**, which is invoked for each cell in your notebook, and may choose to return an **observer object** that can receive or render values as the cell is computed.\n\nDefine your **observer object** with three optional methods: \n\n**pending()** is called whenever the cell is reevaluated.\n\n**fulfilled(value)** is passed the resolved value of the cell, whenever the evaluation has finished.\n\n**rejected(error)** is passed the error when a cell fails to resolve for any reason.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"md`\nAs a first example, let’s build our own version of \\`Inspector.into()\\`, still using the [notebook-inspector](https://github.com/observablehq/notebook-inspector) library:\n\n\\`\\`\\`js\nRuntime.load(notebook, (cell) => {\n var div = document.createElement(\"div\");\n document.body.appendChild(div);\n return new Inspector(div);\n});\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"md`\nHere's an example of an observer callback that doesn't touch the DOM at all, instead logging all evaluation to the console:\n\n\\`\\`\\`js\nRuntime.load(notebook, (cell) => {\n return {\n pending: () => console.log(\\`\\${cell.name} is running...\\`),\n fulfilled: (value) => console.log(cell.name, value),\n rejected: (error) => console.error(error)\n };\n});\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"md`\nFinally, here's an example of an observer callback that inserts just a single cell from your notebook into the page:\n\n\\`\\`\\`js\nRuntime.load(notebook, (cell) => {\n if (cell.name === \"chart\") {\n return {\n fulfilled: (value) => {\n document.getElementById(\"chart\").appendChild(value);\n }\n };\n }\n});\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":465,"value":"md`*Nota bene:* On observablehq.com, each cell in your notebook is evaluated eagerly by default, because each cell is visible on the page. With embedded notebooks, cells for which you do not provide an *observer* will not be evaluated (unless other cells depend on them). This gives you the flexibility to evaluate as much or as little of your notebook as you like, but may also make things appear broken if your notebook uses a lot of side effects. To force evaluation of a cell, just return an observer object (or \\`true\\`) from the observer callback.\n\n\\`\\`\\`js\nRuntime.load(notebook, (cell) => {\n if (cell.name === \"canvas\") {\n return {fulfilled: (value) => $(\"#canvas\").append(value)};\n } else {\n // Force evaluation of all the other cells in the notebook.\n return true;\n }\n});\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"iconHeader(\"Notebooks as npm modules\", ``)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"demo = md`## ✨ Live Demonstrations ✨\n\nAs an off-site example of an embedded notebook in action, check out http://ashkenas.com/breakout. It loads the runtime and [this Observable notebook](https://beta.observablehq.com/@jashkenas/breakout), rendering values from four of the notebook cells into the page: the **game canvas**, the **\"New Game\" button**, the **current score**, and the **high score**.\n\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"md`As a second, more minimal, example: [this CodePen](https://codepen.io/jashkenas/pen/gzZXPG) embeds a [simple notebook](https://beta.observablehq.com/d/e8186dc6a68b5179) that exposes a single \\`tick\\` cell, incrementing every second.\n\nAs a third example, [Philippe Rivière](https://beta.observablehq.com/@fil) wrote a brief tutorial that demonstrates embedding [this notebook on Tissot’s indicatrix](https://beta.observablehq.com/@fil/tissots-indicatrix) into a [Jekyll blog post](https://visionscarto.net/observable-jekyll/).\n\nAnd finally, as an arcane demonstration of the dark arts of recursive embedding, we can use the Observable environment to demonstrate the brainbending reality of a [notebook embedding *itself*](https://beta.observablehq.com/@jashkenas/ouroboros-a-notebook-embeds-itself). Wow!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":450,"value":"md`We’re hoping to continue working to make notebook embedding more useful over time — with your help. If you have interesting use cases, publishing workflows, npm module ideas, website embed techniques, or just want to talk about anything else you’d like to see embedded notebooks do, please join the conversation on [talk.observablehq.com](https://talk.observablehq.com/).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"function iconHeader(title, svg) {\n return html`\n

${title}

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"md`*Thanks for the pile of books, [ClipArt ETC](http://etc.usf.edu/clipart/54200/54238/54238_book_pile.htm).*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4d","stdlib":"1"}} 42:null