Glad to see this is finally out. One big question: I'd like to render arbitrary chunks of Mathematica code, but don't necessarily want to make a cloud notebook for each one. Anyway to get around this? Interactivity in terms of things like Manipulate doesn't matter to me, but I'd like Graphics3D to work.

Embedding in Facebook or Linkedin for you would be risky, in terms of cost, since anyone seeing it would end up charging your account...

Thanks for your feedback, Luc!

Spot-on regarding the closing >. We'll fix that.

The point of the image on the first page is really just a "teaser" and overview of how the library operates; it's (deliberately) not even the complete HTML code for what you see on the right. More examples are on https://reference.wolfram.com/language/WolframNotebookEmbedder/examples/ and it should be easy to copy and paste code from there. The first example is intentionally simplistic to focus on the very basics; the following ones add a bit more complexity.

I agree that using a more sophisticated notebook (such as the Astronomy Clock shown on the landing page) would perhaps be more impressive, but at the same time, it wouldn't change the actual HTML or JS code, so there's a trade-off with distracting from what's essential for embedding... So I think we'll add another "neat" example.

In general, I agree we could and should add many more examples. Of course, since it's open source, anyone's welcome to help: Just open a pull request with changes to https://github.com/WolframResearch/wolfram-notebook-embedder/blob/master/website/pages/en/examples.js

Regarding your code: When I try to open https://www.wolframcloud.com/obj/luc.barthelet/mynotebook.nb I only get a 404 page. Maybe the notebook is not public? (Being public is a prerequesite for a notebook to be embeddable.) Also, instead of

<script                         
WolframNotebookEmbedder.Embed('https://www.wolframcloud.com/obj/luc.barthelet/mynotebook.nb',
document.getElementById('notebookContainer')
);></script>

you'll need

<script>
WolframNotebookEmbedder.embed(
    'https://www.wolframcloud.com/obj/luc.barthelet/mynotebook.nb',
    document.getElementById('notebookContainer')
);
</script>

(note the closing > and .embed instead of .Embed). Please let us know if you still run into problems after these changes.

Hi Jan, I’m excited about this direction! I got your examples going and wanted to take a next step – but, I’m stumbling. I use the ReactJS library extensively. When I saw you are using document.getElementById('container') light bulbs started going off somewhere above my head. As you may know React has the primary node into HTML ReactDOM.render(<App/>, document.getElementById("root")), where <App/> is the first component of the react component tree. What I’m interested in doing with import WolframNotebookEmbedder from 'wolfram-notebook-embedder' is add it lower/higher (at any rate exactly where I want) in the React component tree so that a specific React component is ‘responsible’ for container created/managed by WolframNotebookEmbedder. First, I started a project with a create-react-app (CRA) then tried npm install –save 'wolfram-notebook-embedder but this failed. I have the logs if your interested. Second, in index.html, I tried the

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
    <script
      crossorigin
      src="https://unpkg.com/wolfram-notebook-embedder@0.1/dist/wolfram-notebook-embedder.min.js"
    ></script>

But this is not working out. Unfortunately, I don’t have much time to start a research and testing process so looking for suggestions/help before proceeding.

Cheers, Mitch

I'd like to render arbitrary chunks of Mathematica code, but don't necessarily want to make a cloud notebook for each one.

This should be addressed by the on-the-fly notebook rendering API (maybe of the form https://www.wolframcloud.com/nb?url=...) that I mentioned above. It could also take literal notebook content (a notebook/cell/box expression) as an argument, e.g. https://www.wolframcloud.com/nb?content=.... I won't make any promises when it's going to be there, but it's definitely something we want as well.

In the meanwhile, you could build something a bit like this API yourself, generating a cloud object based on the content expression passed in. You could use a hash of the expression as an identifier, avoiding unnecessary duplication. The API would return the final cloud object URL, which you could then feed into the embedder library. You could enable rather long (browser) caching for the API so it wouldn't have to be executed on every visit. Just be aware that there are some security challenges with this (e.g. you'd have to make sure there are no dangerous Dynamics in the notebook created under your account).

Great you're using React! We're also (happy and heavy) users of React. In fact (as you noticed), the API of the library was inspired by React, i.e.

WolframNotebookEmbedder.embed(url, container);

is intentionally similar to

ReactDOM.render(component, container);

While the embedder library doesn't expose a React component (yet; or maybe it will be another little library that does that at some point), it's definitely meant to allow usage in conjunction with React, and it should be straight-forward to do so. You'd create a wrapper component that renders a single <div> which the notebook can be embedded into, much like described here: https://reactjs.org/docs/integrating-with-other-libraries.html#how-to-approach-the-problem (just call this.embedding = WolframNotebookEmbedder.embed(url, this.el) in componentDidMount and this.embedding.then(nb => nb.detach()) in componentWillUnmount, instead of the jQuery calls in the example there).

In terms of installing the library, using npm (or Yarn) is the right way to go if you have a build/bundle process anyway (which you do, if you're using Create React App). I would only use script tag/CDN-based approach if I didn't have such a process (e.g. in light-weight examples).

I'm not sure why npm install didn't work for you. Attaching the logs would be useful. I just tried in a fresh CRA project, and

npm install --save wolfram-notebook-embedder

works fine for me.

Hi Jan,

This is great news. Thank you.

Could this also be used to render static HTML of notebooks in Github repositories. Similar to Jupyter notebook rendering.?

Your remark about how credits will be charged in deployed notebooks caught my eye. Has there been any development in this direction since your post from last year? So far those few sentences are the only information I've been able to find in that vein.