I don't see events evaluation-start/stop fired when the slider is released in e.g. Manipulate[Sin[x], {x,0,1}].
From api description dynamic triggered evaluation should be announced too, or?

Could someone write example code to show how to use the dynamic javascript control of a notebook using promises.

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

and preferably could someone show to get the code working using async, await. I don't mind submitting the async, await code but need to get the promises working first

Here is my working demo code The file is saved as demo.html

<script crossorigin src="https://unpkg.com/[email protected]"></script>

<div id="notebookContainer">...</div>

<script>
var embedding = WolframNotebookEmbedder.embed('https://www.wolframcloud.com/obj/jpoeschko/Public/Example.nb', document.getElementById('notebookContainer')); 
</script>

A feature request

While in majority of cases DynamicModule[{x},.. will be typeset to

DynamicModuleBox[{ $CellContext`x$$ }, ...

the majority of users will not know that. So if the UI creator used x the name should remain "x"

But since

• I know one compose DynamicModuleBox manually but I have never heard of it being done.
• One could also do DynamicModule[ { MyPackage`x, x },
• Or authors of w-n-e may want to be strict.

We need to meet middle way.

So I propose the name to be user friendly and trying to match $CellContext`x$$ and friends while fullName being strict full name for an explicit match only and for a full control for edge cases.

In some cases the import fails when trying to use the default export so its better if you also include aliases in the docs.
import * as WolframNotebookEmbedder from 'wolfram-notebook-embedder'

Currently to get the value of a DynamicModule variable in a notebook, you have to explicitly set the name of the variable.
This is a huge limitation when it comes to deeper integrating the WL Notebooks within 3rd party platforms.

Ideally you can expose a method to discover all the "available" dynamic module variables in the embedded notebook which in turn will allow the creation of notebook agnostic functionalities such as "save and resume"**

**By exporting the current internal state of a Notebook (using getDynamicModuleVariable) and re-importing it (using setDynamicModuleVariable) at a later point in time to introduce advanced "save and resume" capabilities, especially in somewhat larger notebooks with multiple cells.

I use Load static HTML on https://www.wolframcloud.com/obj/7f44aacf-332a-4e17-8a9f-c98bb57e96e4

The fonts and punctuation look abnormal.

I can receive css normally from wolfram cloud

Chrome Version = 76.0.3809.132

Say I publish a notebook called "note.nb" to the cloud. Then I embed it on my website and play with it (e.g. http://www.fmt.if.usp.br/~gtlandi/qulib.html). Then I make some changes to "note.nb" and publish it again.

Then, when I open the website, I get something strange: first, I see the embed of the new notebook. But then after 1 second or so, it switches back to the old save. This seem to be only a viewing issue (maybe cookie related), since if I try to download the notebook, it download the correct version.

Are there any possible or near future workarounds to use the notebook-embedder with non-public notebooks?
Or is something like this planned?

When using setDynamicModuleVariables method one may face an unsafe expression warning:

Rejected unsafe expression bar during evaluation of ExecuteInDynamicModules[{HoldComplete[FE`x$$...]}, {}, {AsynchronousEvaluate["uuid", Set[FE`x$$..., bar[2]]]}, {}]

But that warning is a side effect and it can't be captured neither in then/catch for the method nor as an 'error' event of the notebook. What is the proper way to handle this?

As far as i understand, when a notebook is deployed/published the cloud generates a /statichtml/ version of the specific notebook.

Can this process be triggered manually on the client?

This is helpful when we need to take a "static" snapshot of the current progress of a notebook for archiving or versioning purposes and cannot use any rasterized image format which will result in losing the content (unsearchable, low res preview etc).

Is any other WL method available for such use?

Using https://codepen.io/nporto/pen/poJQoaz from #5

The value changes anyway but to something that is not expected:

value — The new value of the variable in JSON expression representation (see below).

There's nothing below that explains it.

Additionaly setDynamicModuleVariables works with value : "True" which means there's more to say than 'it is ExpressionJSON' because representation of True is "true".

Please make this clear.

I'm using the wolfram-notebook-embedder within a react application to render some notebooks for a class (see e.g. here by clicking the 3rd Wolfram Language tab on the top of the page).

I was wondering how best to style the various sections using css selectors?
Inspecting an embedded dummy notebook with various styles, it seems to load various style tags directly (e.g. for a 'Title' section):

<style type="text/css" data-is-wolfram-notebook-style="true">
  .cc11 {
  font-family: 'Source Sans Pro','Lucida Sans',Arial,sans-serif;
  font-size: 44px;
  font-weight: 400;
  font-style: normal;
  color: rgba(204,10,2,1);
  }
  </style>

Presumably one could overwrite these using something like:

.cc11 {
	color: rgba(0,255,0,1) !important;
}

My problem is that the class naming does not appear to be consistent. Even within the same notebook, if I reload a bunch of times the class name for 'Title' jumps around from .cc11 to .cc7, .cc8 etc.

Any ideas on how to proceed?

This is to inform people who use webpack in their apps.
Webpack build configs with the default jsonpFunction name will not be able to use this library.
You will see something like this:

Solution
Modify your webpack output config like this:

{
   "output":{
      "jsonpFunction":"myAppJSONPcallback",
      "library":"myApp"
   }
}

Recommendation for Wolfram
You could apply the same config at your end so that this won't be an issue for others

Hello and thanks for this library.

I 've been experimenting with the official examples regarding the Notebook API but
i can't seem to make the getDynamicModuleVariable work.

Looking at the docs: the params of the method should be cellId and name of the variable but this keeps throwing UnknownVariableName error.

The setDynamicModuleVariable method is working fine.
I am using v0.1.5
Here is a modified example from the official manipulate example.
https://codepen.io/nporto/pen/poJQoaz