29:null 2a:["$","title",null,{"children":"🤔 How to: Embed a Notebook in a Svelte App | Sylvain Lesage | Observable"}] 2f:T629,md`# 🤔 How to: Embed a Notebook in a Svelte App 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/). If you're interested in Svelte and Observable, see also https://observablehq.com/@rich-harris/reactive-dataflow on the dataflow similarities. Other adaption: [use \`module.redefine()\` to update cell](https://observablehq.com/@severo/how-to-embed-a-notebook-in-a-svelte-app-without-mutable), instead of requiring a \`mutable\` cell. *See also:* [Torben Jansen](https://observablehq.com/@toja) did the same experiment directly on the [Svelte's online REPL](https://svelte.dev/repl/be2cbfee41bd416fb812b15c119d086c), importing the Observable's runtime there. Nice job! --- 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:T573,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 += mutable speed * (Math.random() - .5) - 0.01 * p.vx; p.vy += mutable 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:T414,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":"41688feba2c50da2","slug":"how-to-embed-a-notebook-in-a-svelte-app","title":"🤔 How to: Embed a Notebook in a Svelte App","thumbnail":"2e3785d23b6eb138289359d2c5ce57389e4234d959a425bd67876084a7ae21f6","access_level":"public","create_time":"$D2019-09-19T17:02:01.670Z","update_time":"$D2020-06-01T12:12:09.767Z","view_time":null,"first_public_time":"$D2019-09-19T18:03:42.758Z","has_unpublished_edits":null,"fork":true,"stars":11,"starred":false,"owner":{"type":"team","id":"5c7b4ebed88da11a","login":"severo","name":"Sylvain Lesage","avatar_url":"https://avatars-next.observableusercontent.com/7713195c83e5bfd8090ffe70c871c23e743c711e9e712675c99a8960ca8c7944","tier":"starter_2024"},"version":497,"publish_version":497,"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":6,"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","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":79,"value":"mutable speed = 0.1","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"slider = {\n const input = html``\n input.oninput = () => mutable speed = input.valueAsNumber;\n return input;\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 \\`mutable 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.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.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 this notebook’s \\`mutable speed\\` variable, and then use a Svelte’s [\\`$:\\`](https://svelte.dev/docs#3_$_marks_a_statement_as_reactive) reactive statement to set that variable’s value.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":244,"value":"highlight(\n [8, 16, 17, 18, 19, 20, 24],\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.\n\n`","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"