Examples

These examples are live demos using the Wolfram Notebook Embedder library. They import the library from a CDN behind the scenes, which exposes the global WolframNotebookEmbedder JavaScript variable. In your own project, you will probably want to install the library using npm or Yarn and import it locally, as described in the Getting Started documentation.

Basic example

Embed a particular notebook on an HTML page.

<div id="container"></div>

WolframNotebookEmbedder.embed(
    'https://www.wolframcloud.com/obj/jpoeschko/Public/BasicExample.nb',
    document.getElementById('container')
);

Seamless embedding dimensions

By default, embedded notebooks adapt to the width available to their container node, and adjust the height of the container node so that the whole notebook fits without requiring a vertical scrollbar. You can change that by passing different values for width and maxHeight to WolframNotebookEmbedder.embed, e.g. to set a fixed width and maximum height.

<div id="container"></div>
<p>This text appears right after the embedded notebook content, even if the notebook does not need the full maximum height.</p>

WolframNotebookEmbedder.embed(
    'https://www.wolframcloud.com/obj/jpoeschko/Public/BasicExample.nb',
    document.getElementById('container'),
    {width: 400, maxHeight: 500}
);

Programmatic control of Manipulate variables

Render a notebook specified in an input field and control a Manipulate variable in its last cell.

<p>
    Enter the URL of a cloud object:
    <input id="path" style="width:300px" value="https://www.wolframcloud.com/obj/jpoeschko/Public/Example.nb" />
    <button onclick="embedNotebook()">Embed Notebook</button>
</p>
<p>
    If the notebook's last cell contains a <code>Manipulate</code> with a variable <code>x</code>, this will reset it to 0:
    <button onclick="resetX()">Reset <code>x</code></button>
</p>
<div id="container"></div>

let embedding = null;

function embedNotebook() {
    const url = document.getElementById('path').value;
    embedding = WolframNotebookEmbedder.embed(url, document.getElementById('container'), {allowInteract: true});
}

function resetX() {
    if (embedding) {
        embedding.then(nb => {
            nb.getCells().then(({cells}) => {
                if (cells) {
                    const lastCell = cells[cells.length - 1];
                    return nb.setDynamicModuleVariable({
                        cellId: lastCell.id,
                        name: 'x$$',
                        value: 0
                    });
                }
            })
        })
    }
}