@demo module

Placeholder for an application demo.

@demo PATH [HEIGHT] 

/**
 * @demo demos/example.html 300
 */

Parameters

  1. PATH {String}:

    The path to a .html file.

  2. HEIGHT {Number}:

    The height of the html page. If a height is not provided, the height is determined as the content of the body.

Specifying the HTML and JS source

By default, @demo uses the html of the body minus any script tags as the HTML source. This can be changed by:

  • Adding an element with id="demo-html" or setting window.DEMO_HTML to the source text.
  • Adding id="demo-source" to a script tag or setting window.DEMO_SOURCE to the source JS.

Example

An example demo file might look like:

<div id="demo-html"><b>Hello world!</b></div>
<script id="demo-source">
  var div = document.createElement("div");
  div.textContent = "it worked!";
  document.body.appendChild(div);
</script>

That gets used like:

@demo demos/example.html

Which gets translated to:

<div class='demo_wrapper' data-demo-src='demos/example.html'></div>

And renders like: