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

The source for this demo

Using `demobox` cli

```javascript
// @demobox
var first = 'javascript code'
    , second = `You can evaluate ${first} with es6 goodness.`;
// the last line must be an expression that results in a react
//  element.
<p>
    <span>{second} </span>
    <strong>JSX is just fine</strong>
</p>
```

Using `demobox.js` drop-in script

<textarea data-demobox>
var first = 'javascript code'
    , second = `You can evaluate ${first} with es6 goodness.`;
// the last line must be an expression that results in a react
//  element.
<p>
    <span>{second} </span>
    <strong>JSX is just fine</strong>
</p>
</textarea>

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
<span>
  <strong>[render target] </strong>
  This demo box one has a render target
  that is external, in a different
  cell of this table
</span>
</textarea>