2c:null 2d:["$","title",null,{"children":"Downloading and Embedding Notebooks | 深度碎片 | Observable"}] 32:T566,md`So, you’ve written your magnum opus: a 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 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). 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.`33:T456,render_notebook = md`## 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 how to render a notebook into an empty body ([see it live](https://bl.ocks.org/mbostock/raw/1cf3e863b054aca0bc7061b5292120ab/)): ~~~html ~~~`34:T46d,data_from_web_to_notebook = md`## Writing values from JavaScript In addition to observing reactive values, your JavaScript program can assign reactive values, too, allowing bidirectional dataflow. For example, say you have a [bar chart](/@d3/bar-chart), and your application wants to update the displayed data dynamically. First, keep a reference to the main module for your notebook: ~~~js const main = new Runtime().module(notebook, name => { if (name === "chart") { return new Inspector(container); } }); ~~~ Then whenever you want to change the chart’s data, call [*module*.redefine](https://github.com/observablehq/runtime/blob/master/README.md#module_redefine): ~~~js main.redefine("data", newData); ~~~ Because Observable uses dataflow, the chart will update automatically in response to the new data, and the inspector will replace the contents of the chart’s *container*. You can pass *module*.redefine a constant value, a function that references other cell values—even a [generator](/@observablehq/introduction-to-generators) function that repeatedly yields values to produce an animation, if you want.`35:T457,md`## Notebooks as npm modules The tarball you get when you click **Download code** is an installable npm module. If you right-click and copy the link, you’ll get something that looks like this: ~~~ https://api.observablehq.com/@jashkenas/my-neat-notebook.tgz?v=3 ~~~ Use this URL with **npm** or **Yarn** to install the latest version of your notebook in \`node_modules\` under its published name (\`@jashkenas/my-neat-notebook\`), along with a copy of the Observable runtime: ~~~sh npm install @observablehq/runtime@4 npm install https://api.observablehq.com/@jashkenas/my-neat-notebook.tgz?v=3 ~~~ Depending on your version of Node, you’ll either need to use Node’s \`--experimental-modules\` flag, [esm](https://github.com/standard-things/esm), or your preferred bundler of choice. Note that the contents of this tarball may change over time (either because you republished your notebook, or because of internal changes to the compiled format). Thus, you may instead prefer to commit the source code contents of the download tarball into your repository rather than installing from node_modules.`36:[] 30:{"id":"2938837ae0edc191","slug":"downloading-and-embedding-notebooks","title":"Downloading and Embedding Notebooks","thumbnail":"3427cdcbe463faf8cf5fcb9e57f3dc9aec6fd8c5acd8db875278b73c5f9762a0","access_level":"public","create_time":"$D2019-10-14T23:06:50.308Z","update_time":"$D2019-10-23T14:26:29.353Z","view_time":null,"first_public_time":"$D2019-10-23T12:48:15.088Z","has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"7a6719735624fc09","login":"embracelife","name":"深度碎片","avatar_url":"https://avatars-next.observableusercontent.com/731f7a9249922789c635677b137dc12871d6f37c7ec02bbf925a5f67fc4ca505","tier":"starter_2024"},"version":1063,"publish_version":1063,"role":null,"authored":false,"authors":[{"type":"individual","id":"663c75dba82999cc","login":"embracelife","name":"深度碎片","avatar_url":"https://avatars-next.observableusercontent.com/731f7a9249922789c635677b137dc12871d6f37c7ec02bbf925a5f67fc4ca505","tier":null}],"members":[{"type":"individual","id":"663c75dba82999cc","login":"embracelife","name":"深度碎片","avatar_url":"https://avatars-next.observableusercontent.com/731f7a9249922789c635677b137dc12871d6f37c7ec02bbf925a5f67fc4ca505","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"ccde8c7290c73877","slug":"observable-tutorials","title":"Observable tutorials","owner":{"id":"7a6719735624fc09","login":"embracelife","name":"深度碎片"}},"type":"notebook","body":{"titling":"auto","title":"Downloading and Embedding Notebooks","cells":[{"id":577,"value":"md`# Downloading and Embedding Notebooks\n

Notebooks can be embedded and customized anywhere on the web (or off it).

\n\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":999,"value":"embed_cell = md`## Embedding a cell on a web page\n\nIndividual cells from a notebook — a chart, a visualization, a widget — are quick and easy to embed. In the cell menu, click on **Embed code** to generate a bit of HTML that can be pasted into any web page to embed that cell.\n\n

\n\nFor an example, click **Embed code** in the menu to the left of the cell below to try it out.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1002,"value":"graphic = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1028,"value":"md`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).\n\nIf 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](https://observablehq.com/@observablehq/history).\n\nHere’s a link to [a plain web page that embeds the \\`graphic\\` cell above](http://ashkenas.com/cell-embed-example.html), from two different versions of this notebook, hosted off-site.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"md`## 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$ \n\nAlternatively, 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~~~\n\nYou 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":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":617,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":311,"value":"md`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":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":792,"value":"render_a_cell = md`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~~~\n\nIt’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! So be sure to include cells that have important side effects, and to remember to render your CSS \\`