32:T5ea,md`# 🤔 How to: Embed a Notebook in a Svelte App (two-way binding) _This notebook is a fork of [🤔 How to: Embed a Notebook in a React App](https://observablehq.com/@observablehq/how-to-embed-a-notebook-in-a-react-app) by Jeremy Ashkenas. The content and story remain unchanged, and my main contribution here is to use [Svelte](https://svelte.dev/) instead of [React](https://reactjs.org/). I also made two technical changes: I don't use a [mutable cell](https://observablehq.com/@observablehq/introduction-to-mutable-state), and I apply a two-way binding between the controls in Svelte and the notebook cells (Svelte controls change the notebook behavior, and then they are updated depending on the notebook cells)._ --- Squinting at them from a certain distance, [Observable notebooks](https://beta.observablehq.com/@mbostock/introduction-to-notebooks) and [Svelte apps](https://svelte.dev/tutorial/) can look like close cousins: both are functional, reactive ways of writing UIs in JavaScript. Let’s see if we can get them to play nicely together, by embedding and controlling an Observable notebook from Svelte. If you haven’t already read the [introduction to downloading and embedding notebooks](https://beta.observablehq.com/@jashkenas/downloading-and-embedding-notebooks), read that first. No worries, I can wait. Now that we’re on the same page, let’s start with a small, pretty animation — particles drifting on a random walk, connected by faint lines when they approach one another.`33:T569,animation = { const height = 300; const min = 0; const max = 100; const max2 = Math.pow(max, 2); const context = DOM.context2d(width, height); const canvas = context.canvas; const n = 100; const particles = new Array(n); for (let i = 0; i < n; ++i) { particles[i] = { x: Math.random() * (width + max * 2) - max, y: Math.random() * (height + max * 2) - max, vx: 0, vy: 0 }; } while (true) { for (let i = 0; i < n; ++i) { const p = particles[i]; p.x += p.vx; if (p.x < -max) p.x += width + max; else if (p.x > width + max) p.x -= width + max; p.y += p.vy; if (p.y < -max) p.y += height + max; else if (p.y > height + max) p.y -= height + max; p.vx += speed * (Math.random() - .5) - 0.01 * p.vx; p.vy += speed * (Math.random() - .5) - 0.01 * p.vy; } for (let i = 0; i < n; ++i) { for (let j = i + 1; j < n; ++j) { const pi = particles[i]; const pj = particles[j]; const dist = Math.pow(pi.x - pj.x, 2) + Math.pow(pi.y - pj.y, 2); if (dist < max2) { context.beginPath(); context.strokeStyle = `hsl(0,0%,${100 - ((max2 - dist) / max2) * 25}%)`; context.moveTo(pi.x, pi.y); context.lineTo(pj.x, pj.y); context.stroke(); } } } yield canvas; } }34:T424,md`Now we’re ready to edit the generated \`src/App.svelte\`, importing the Runtime and the notebook, loading it up, and embedding the animation in the page. We’ll use the [Svelte bind:this attribute](https://svelte.dev/docs#bind_element) to provide the Observable runtime with a reference to the Svelte DOM that we can render into. \`\`\`svelte

\`\`\` Voilà. Your browser should already have refreshed:

`35:T4c2,highlight( [2, 7, 14, 18, 19, 20, 21, 25, 26, 27, 28, 29, 30, 31], `

Speed: {speed}

Boost: {#if boost}yes{:else}no{/if}

` )36:T52e,highlight( [2, 29, 30, 31, 32, 33, 34, 35, 36, 42], `

Speed: {speed}

Boost: {#if boost}yes{:else}no{/if}

` )37:[] 2f:{"title":"🤔 How to: Embed a Notebook in a Svelte App (two-way binding)","cells":[{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":484,"value":"import { checkbox, slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":487,"value":"viewof speed = slider({\n min: 0,\n max: max_speed,\n step: 0.1,\n value: max_speed - 1\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":508,"value":"viewof boost = checkbox({\n description: \"Unlock high speeds\",\n options: [{ value: \"ok\", label: \"On\" }],\n value: false\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":510,"value":"max_speed = boost ? 10 : 2","pinned":false,"hidden":false,"mode":"ojs"},{"id":108,"value":"md`Here in this Observable notebook, you can control how fast the particles meander by moving the above slider to adjust their \\`speed\\`, and unlock high speeds using the \\`boost\\` checkbox. When \\`boost\\` is toggled, the \\`speed\\` is set to half the max speed.\n\nIn order to show two-way binding between the notebook and svelte, we will:\n- manage the two controls (range input and checkbox) in svelte\n- compute \\`max_speed\\` and render the chart in the notebook\n\nNow, let's start a brand new Svelte app with [sveltejs/template](https://github.com/sveltejs/template). Open your Terminal:\n\n\\`\\`\\`bash\n> npx degit sveltejs/template pretty-animation\n\n... (installation flies by) ...\n\n> cd pretty-animation\n> yarn\n> yarn dev\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":156,"value":"md`Your browser quietly opens a new tab to [http://localhost:5000/](http://localhost:5000/). You see the Svelte's “Hello world” starter page:\n\n

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":163,"value":"md`Next, we’ll add the [Observable runtime](https://github.com/observablehq/notebook-runtime) and this notebook to the Svelte app.\n\nTo install a notebook, you need the URL for the npm (and Yarn) installable tarball. You can retrieve it for this notebook by right-clicking on **Download code** within the notebook menu at the top of the page, and choosing to **Copy link address**.\n\n

\n\nThe URL should be:\n\n\\`\\`\\`\nhttps://api.observablehq.com/@severo/how-to-embed-a-notebook-in-a-svelte-app-two-way-binding.tgz?v=3\n\\`\\`\\`\n\nBack in the terminal, add the runtime and the notebook with Yarn or npm:\n\n\\`\\`\\`bash\nyarn add @observablehq/runtime@4\nyarn add https://api.observablehq.com/@severo/how-to-embed-a-notebook-in-a-svelte-app-two-way-binding.tgz?v=3\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs"},{"id":215,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":232,"value":"md`Now let’s add two Svelte controls to the page. We’ll use a range \\`input\\`, connected to \\`speed\\`, and rendering the current speed back into the HTML. We'll also add a checkbox \\`input\\` connected to \\`boost\\` to update the slider's max value.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":328,"value":"highlight(\n [7, 8, 9, 23, 24, 25, 26],\n `\n\n

\n Speed: {speed}
\n
\n Boost: {#if boost}yes{:else}no{/if}
\n \n

\n`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":344,"value":"md`Fiddling with the input, you’ll notice that changes to \\`speed\\` aren’t affecting the animation. Checking \\`boost\\` also doesn't increase the max speed ... yet. We have Svelte state changes, but they aren't yet connected to the Observable runtime.\n\nLet’s fix that. In \\`onMount\\`, we’ll store a reference to the notebook module, and update the \\`maxSpeed\\` variable when \\`max_speed\\` cell changes. On the other side, in \\`beforeUpdate\\` we set the \\`speed\\` and \\`boost\\` notebook cells values.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"md`We're almost there, but... we still have to update the \\`speed\\` when \\`maxSpeed\\` changes. To do that, we first have to render the component, and then (using Svelte's [use:action](https://svelte.dev/docs#use_action) and [tick](https://svelte.dev/docs#tick)) update the \\`speed\\` variable.\n\nNote how we also replaced the \\`beforeUpdate\\` function by Svelte’s []()[\\`$:\\` reactive statements](https://svelte.dev/docs#3_$_marks_a_statement_as_reactive), in order to only update the cells which corresponding variable has changed.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"$36","pinned":false,"hidden":false,"mode":"ojs"},{"id":252,"value":"md`And boom. Your Svelte app is now interacting with an Observable notebook with a two-way binding.\n\n

\n\nCongratulations.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"function highlight(lines, code) {\n let pretty = hljs.highlightAuto(code, [\"js\"]).value;\n pretty = pretty\n .split(/\\r?\\n/)\n .map((line, i) => {\n return lines.indexOf(i + 1) > -1\n ? `${line}`\n : line;\n })\n .join('\\n');\n return html`

${pretty}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":276,"value":"hljs = require(\"https://bundle.run/highlight.js@9.12.0\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":136,"value":"styles = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W37","stdlib":"1","titling":"auto"}