Getting Started
Create a notebook in the Wolfram Cloud and make it public.
In the cloud UI, use the New Notebook button and then use the Share dialog to make it public.
From the Wolfram Language, you could publish notebook content like so:
CloudPublish[Manipulate[Plot[Sin[a x], {x, 0, 2 Pi}], {a, 1, 3}]]
Install this library in your JavaScript project using
npm install wolfram-notebook-embedder
so you can import it in JavaScript as
import * as WolframNotebookEmbedder from 'wolfram-notebook-embedder';
or import it as a
<script>
tag from a CDN:<script crossorigin src="https://unpkg.com/wolfram-notebook-embedder@0.3/dist/wolfram-notebook-embedder.min.js"></script>
In your HTML, create a container where you want the notebook to be rendered (say
<div id="notebookContainer"></div>
) and add the following JavaScript code:var embedding = WolframNotebookEmbedder.embed('url', document.getElementById('notebookContainer'));
where
url
is the URL of your cloud object from step 1. More details aboutembed
are described in the library interface documentation.If you want to control the notebook from your JavaScript code, wait for the
embed
result (a Promise) to resolve, and then use various notebook API methods:embedding.then(function (nb) { // This will reset the DynamicModule variable x$$ // in the first cell of the notebook. return nb.getCells().then(function (cells) { nb.setDynamicModuleVariable({ cellId: cells[0].id, name: 'x$$', value: 0 }); }); })
If you want to serve static HTML from your server so the notebook can be rendered before JavaScript code is loaded (which also helps with SEO), take a look at server-side rendering.
If you run into any issues, take a look at the troubleshooting guide. If you think you found a bug, please report it.