29:null 2a:["$","title",null,{"children":"🤔 How to: Embed a Notebook in a Svelte App (without mutable) | Sylvain Lesage | Observable"}] 2f:T426,md`# 🤔 How to: Embed a Notebook in a Svelte App (without mutable) Fork of https://observablehq.com/@observablehq/how-to-embed-a-notebook-in-a-react-app, using [Svelte](https://svelte.dev/) instead of [React](https://reactjs.org/). **+** don't use a mutable variable --- 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.`30: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; } }31: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:

`32:[] 2d:{"id":"d3d4c81b499c402b","slug":"how-to-embed-a-notebook-in-a-svelte-app-without-mutable","title":"🤔 How to: Embed a Notebook in a Svelte App (without mutable)","thumbnail":"194b9f00620eafa5e875ed15ad2d5368b58130e429d420973d6acca868ea0401","access_level":"public","create_time":"$D2019-09-20T09:57:49.350Z","update_time":"$D2019-09-20T12:06:04.688Z","view_time":null,"first_public_time":"$D2019-09-20T10:20:02.736Z","has_unpublished_edits":null,"fork":{"id":"41688feba2c50da2","slug":"how-to-embed-a-notebook-in-a-svelte-app","title":"🤔 How to: Embed a Notebook in a Svelte App","owner":{"id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage"}},"stars":7,"starred":false,"owner":{"type":"team","id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":"starter_2024"},"version":513,"publish_version":513,"role":null,"authored":false,"authors":[{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null}],"members":[{"type":"individual","id":"bf1872cca880d345","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"6a21a5b27d47e8d7","slug":"observable","title":"Observable","owner":{"id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage"}},"type":"notebook","body":{"title":"🤔 How to: Embed a Notebook in a Svelte App (without mutable)","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"$30","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":484,"value":"import { slider } from \"@jashkenas/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":487,"value":"viewof speed = slider({\n min: 0,\n max: 1,\n step: 0.1,\n value: 0.1\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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\\`.\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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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-without-mutable.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-without-mutable.tgz?v=3\n\\`\\`\\``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":215,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"md`Now let’s add a Svelte control to the page. We’ll use a range \\`input\\`, connected to \\`speed\\`, and rendering the current speed back into the HTML.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"highlight(\n [7, 21, 22, 23],\n `\n\n

\n Speed: {speed}\n
\n \n

\n`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":344,"value":"md`Fiddling with the input, you’ll notice that changes to \\`speed\\` aren’t affecting the animation ... 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 then use a Svelte’s [\\`$:\\`](https://svelte.dev/docs#3_$_marks_a_statement_as_reactive) reactive statement to set the \\`speed\\` cell value.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"highlight(\n [8, 12, 19],\n `\n\n

\n Speed: {speed}\n
\n \n

\n`\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":252,"value":"md`And boom. Your Svelte app is now interacting with an Observable notebook.\n\n

\n\nCongratulations.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":276,"value":"hljs = require(\"https://bundle.run/highlight.js@9.12.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"styles = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2e:"$2d:body"