id | title |
---|---|
GettingStarted |
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.