Check out the source for this page and the source for the home page for extended examples of using demobox page generator.

This page demonstrates some of the configuration for the DemoBox component.

First example

Slightly larger example

The rest of these examples will show demobox-in-demobox, to make things easier.

Other Positions

The "position" argument allows you to specify where the output should be displayed. Default is "right".

Without CodeMirror (just uses a text box)

Advanced Usage: External Output Node

Source HTML

<textarea data-demobox data-target="#id-of-target">
// code here
  <strong>[render target] </strong>
  This demo box one has a render target
  that is external, in a different
  cell of this table