Embedding a Starboard Notebook

Starboard is an exciting open-source project I learned about from a blog post by Patrick Mineault. Basically, it allows the user to run and edit an interactive notebook, including both Python and Javascript, in their browser (not requiring a server like Jupyter!). It’s easy to embed a notebook stored (for free) on https://starboard.gg (you’ll see a Share or embed button at the top), but I wanted to have my notebook under my own source control. After some digging around I figured out how to embed a local Starboard notebook on my website. Let’s say I have a notebook stored as demo.nb. Then all I have to do is include this HTML snippet on my page (which should work for a Markdown-based website like this one):

<div id="mount-point"></div>

<script type="module">
    import {StarboardEmbed} from "https://unpkg.com/starboard-wrap/dist/index.js"
    const mount = document.querySelector("#mount-point");

    let response = await fetch("demo.nb");
    let notebook = await response.text();

    const el = new StarboardEmbed({
        notebookContent: notebook,
        src: "https://unpkg.com/starboard-notebook/dist/index.html"
    });

    mount.appendChild(el);
</script>

…and here’s the result!