Getting Started

  1. 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}]]

  2. 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>

  3. 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 about embed are described in the library interface documentation.

  4. 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
        });
    });
})

  5. 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.

  6. If you run into any issues, take a look at the troubleshooting guide. If you think you found a bug, please report it.

Library Interface →