Library to embed Wolfram Cloud notebooks on websites.
npm install wolfram-notebook-embedder
A library to embed Wolfram Cloud notebooks on websites. It does not use an </code>, but renders a notebook directly into a given DOM node for a more seamless experience.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Installation</h2></p><p class="my-3">If you are using a package manager such as <a href="https://www.npmjs.com/get-npm" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">npm</a> or <a href="https://yarnpkg.com/en/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Yarn</a>, you can install this package from the npm repository:</p><p class="my-3"> npm install wolfram-notebook-embedder<br /> <br />and then import it in your JavaScript code like so:</p><p class="my-3"> import * as WolframNotebookEmbedder from 'wolfram-notebook-embedder'; <br /> <br />You can also import this library as a <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><script></code> tag from a CDN:</p><p class="my-3"> <script crossorigin src="https://unpkg.com/wolfram-notebook-embedder@0.3/dist/wolfram-notebook-embedder.min.js"></script><br /> <br />and then use the global variable <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">WolframNotebookEmbedder</code>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Usage & Documentation</h2></p><p class="my-3">* <a href="./docs/GettingStarted.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><strong>Getting Started</strong></a><br />* <a href="./docs/LibraryInterface.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Library Interface</a><br />* <a href="./docs/NotebookAPI.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Notebook API</a><br />* <a href="./docs/ServerSideRendering.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Server-Side Rendering</a><br />* <a href="./docs/NotebookLoadingPhases.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Notebook Loading Phases</a><br />* <a href="./docs/Troubleshooting.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Troubleshooting</a></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Examples</h2></p><p class="my-3">* <a href="./examples/basic.html" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Basic Example</a><br />* <a href="./examples/manipulate.html" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Manipulate Example</a><br />* <a href="./examples/dimensions.html" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Dimensions Examples</a><br />* <a href="./examples/ssr.html" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Server-Side Rendering</a></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Browser Support</h2></p><p class="my-3">We support all modern browsers (the last two major versions of Chrome, Firefox, Edge, Safari). Internet Explorer is <em>not</em> supported anymore.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Contributing</h2></p><p class="my-3">Everyone is welcome to contribute. Please read the <a href="CONTRIBUTING.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Contributing agreement</a> and the <a href="./docs/Development.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Development guide</a> for more information, including how to run the tests.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Versioning</h2></p><p class="my-3">We use <a href="https://semver.org/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">semantic versioning</a> for this library and its API.</p><p class="my-3">See the <a href="CHANGELOG.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">changelog</a> for details about the changes in each release.</p><p class="my-3">Each version of this library is compatible with a certain range of versions of the Wolfram Cloud. Currently, the requirement is Wolfram Cloud 1.50 or higher. We try hard not to make any backward-incompatible changes on the Wolfram Cloud side, which would require an update of this library to keep embeddings working.</p><p class="my-3">| Library version | Minimum Wolfram Cloud version |<br />|-----------------|-------------------------------|<br />| 0.1.x | 1.50 |<br />| 0.2.x | 1.55 |<br />| 0.3.x | 1.59 |</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">License</h2></p><p class="my-3">This project is licensed under the <a href="./LICENSE" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">MIT license</a>.<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div><template id="P:3"></template></div></div></div><script>self.__next_f.push([1,"26:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n27:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.1.5\"}]\n28:[\"$\",\"$L5\",\"rollup\",{\"href\":\"/package/rollup\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"rollup\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.58.0\"}]]}]\n29:[\"$\",\"$L5\",\"serve\",{\"href\":\"/package/serve\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"serve\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^12.0.1\"}]]}]\n2a:[\"$\",\"$L5\",\"uglify-js\",{\"href\":\"/package/uglify-js\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"uglify-js\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.14.2\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><script>$RC("B:1","S:1")</script></body></html>
</code>, but renders a notebook directly into a given DOM node for a more seamless experience.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Installation</h2></p><p class="my-3">If you are using a package manager such as <a href="https://www.npmjs.com/get-npm" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">npm</a> or <a href="https://yarnpkg.com/en/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Yarn</a>, you can install this package from the npm repository:</p><p class="my-3"> npm install wolfram-notebook-embedder<br /> <br />and then import it in your JavaScript code like so:</p><p class="my-3"> import * as WolframNotebookEmbedder from 'wolfram-notebook-embedder'; <br /> <br />You can also import this library as a <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono"><script></code> tag from a CDN:</p><p class="my-3"> <script crossorigin src="https://unpkg.com/wolfram-notebook-embedder@0.3/dist/wolfram-notebook-embedder.min.js"></script><br /> <br />and then use the global variable <code class="bg-muted px-1 py-0.5 rounded text-sm font-mono">WolframNotebookEmbedder</code>.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Usage & Documentation</h2></p><p class="my-3">* <a href="./docs/GettingStarted.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer"><strong>Getting Started</strong></a><br />* <a href="./docs/LibraryInterface.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Library Interface</a><br />* <a href="./docs/NotebookAPI.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Notebook API</a><br />* <a href="./docs/ServerSideRendering.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Server-Side Rendering</a><br />* <a href="./docs/NotebookLoadingPhases.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Notebook Loading Phases</a><br />* <a href="./docs/Troubleshooting.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Troubleshooting</a></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Examples</h2></p><p class="my-3">* <a href="./examples/basic.html" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Basic Example</a><br />* <a href="./examples/manipulate.html" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Manipulate Example</a><br />* <a href="./examples/dimensions.html" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Dimensions Examples</a><br />* <a href="./examples/ssr.html" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Server-Side Rendering</a></p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Browser Support</h2></p><p class="my-3">We support all modern browsers (the last two major versions of Chrome, Firefox, Edge, Safari). Internet Explorer is <em>not</em> supported anymore.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Contributing</h2></p><p class="my-3">Everyone is welcome to contribute. Please read the <a href="CONTRIBUTING.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Contributing agreement</a> and the <a href="./docs/Development.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">Development guide</a> for more information, including how to run the tests.</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">Versioning</h2></p><p class="my-3">We use <a href="https://semver.org/" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">semantic versioning</a> for this library and its API.</p><p class="my-3">See the <a href="CHANGELOG.md" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">changelog</a> for details about the changes in each release.</p><p class="my-3">Each version of this library is compatible with a certain range of versions of the Wolfram Cloud. Currently, the requirement is Wolfram Cloud 1.50 or higher. We try hard not to make any backward-incompatible changes on the Wolfram Cloud side, which would require an update of this library to keep embeddings working.</p><p class="my-3">| Library version | Minimum Wolfram Cloud version |<br />|-----------------|-------------------------------|<br />| 0.1.x | 1.50 |<br />| 0.2.x | 1.55 |<br />| 0.3.x | 1.59 |</p><p class="my-3"><h2 class="text-xl font-semibold mt-5 mb-3">License</h2></p><p class="my-3">This project is licensed under the <a href="./LICENSE" class="text-primary hover:underline" target="_blank" rel="noopener noreferrer">MIT license</a>.<br /></p></div><div class="flex justify-center absolute inset-x-0 bottom-0 bg-gradient-to-t from-background via-background to-transparent pb-4 pt-16"><button data-slot="button" class="inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-chevron-down mr-1 h-4 w-4"><path d="m6 9 6 6 6-6"></path></svg>Show more</button></div></div></div><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-dependencies" hidden="" id="radix-_R_aav5ubrb_-content-dependencies" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div><template id="P:3"></template></div></div></div><script>self.__next_f.push([1,"26:[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}]\n27:[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^4.1.5\"}]\n28:[\"$\",\"$L5\",\"rollup\",{\"href\":\"/package/rollup\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"rollup\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^2.58.0\"}]]}]\n29:[\"$\",\"$L5\",\"serve\",{\"href\":\"/package/serve\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"serve\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^12.0.1\"}]]}]\n2a:[\"$\",\"$L5\",\"uglify-js\",{\"href\":\"/package/uglify-js\",\"className\":\"group flex items-center justify-between rounded-md px-2 py-1.5 text-sm transition-colors hover:bg-accent\",\"children\":[[\"$\",\"span\",null,{\"className\":\"flex items-center gap-1.5 truncate font-mono text-foreground\",\"children\":[[\"$\",\"svg\",null,{\"ref\":\"$undefined\",\"xmlns\":\"http://www.w3.org/2000/svg\",\"width\":24,\"height\":24,\"viewBox\":\"0 0 24 24\",\"fill\":\"none\",\"stroke\":\"currentColor\",\"strokeWidth\":2,\"strokeLinecap\":\"round\",\"strokeLinejoin\":\"round\",\"className\":\"lucide lucide-chevron-right h-3 w-3 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100\",\"children\":[[\"$\",\"path\",\"mthhwq\",{\"d\":\"m9 18 6-6-6-6\"}],\"$undefined\"]}],\"uglify-js\"]}],[\"$\",\"span\",null,{\"className\":\"ml-2 shrink-0 font-mono text-xs text-muted-foreground\",\"children\":\"^3.14.2\"}]]}]\n"])</script><div hidden id="S:3"><div data-state="inactive" data-orientation="horizontal" role="tabpanel" aria-labelledby="radix-_R_aav5ubrb_-trigger-versions" hidden="" id="radix-_R_aav5ubrb_-content-versions" tabindex="0" data-slot="tabs-content" class="flex-1 outline-none mt-6"></div></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:3","P:3")</script><script>$RC("B:1","S:1")</script></body></html>