Demobox is a quick & stylish way of getting a demo page up and running for your new react component.
There are three ways to use demobox, for varying simplicity and flexibility.
- demo page generator -- markdown to demo page converter
- drop-in script -- turn text boxes into live editors
- react component -- integrate a live editor into your project
Take a look at the FAQ at the bottom, or head over to github to file an issue or ask a question.
The demobox
cli tool will turn a regular markdown file with annotated code
snippets into a stylish demo page with editable examples. You can look at the
markdown source for this page
here as an
example. Also the source for the demo page
(demo.md)
showcases a number of features.
$ npm install -g demobox
$ demobox -i demo.md -o demo.html
---
title: Demobox Demos
subtitle: Getting rather meta
fontPair: Open Sans
colors: light-green
links:
Home: index.html
Demos: demos.html
Themes: themes.html
Github: https://github.com/jaredly/demobox
---
# First example
``ˋjavascript
// @demobox height=150px
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><br/>
<strong>JSX is just fine</strong>
</p>
``ˋ
... etc.
These go in the yaml frontmatter (similar to jekyll) at the top of the markdown file.
- title: the title of the page (default: Demo Page)
- subtitle: the subtitle (default: none)
- links: a map of title:href for links displayed in the header
- styles: a list of css files to include on the page
- scripts: a list of js files to include
- extraHead: a list of html files to inject at the end of the head
- bodyTop: a list of html files to inject at the top of the body
- ga: google analytics tracking code. If present, GA code is added to the bottom of the page.
There are two configuration options associated with theming, colors
and
fontPair
. Look at the themes page for examples and more
information.
There are a few suffixes you can put onto headings that will give them extra properties (See the markdown source of this page for an example).
(<<)
marks the section as collapsed(>>)
marks the section as collapsible but expanded(||)
makes the section part of a column group. Adjascent sections (of the same heading level) that have this marking will be rendered side-by-side. An example of this is thedemo.md
and "demo.html
rendered page" sections above.
<!-- if you want codemirror, that needs to be included separately -->
<script src="https://jaredly.github.io/demobox/demobox.js"></script>
<link rel="stylesheet" href="https://jaredly.github.io/demobox/demobox.css">
<textarea data-demobox>
// some great code here
var x = <em>element</em>;
<strong>End with a react {x}</strong>
</textarea>
The demobox.js
script finds all textarea
s with the data-demobox
attribute and converts them into demoboxes that look like this:
// @demobox
// some great code here
var x = <em>element</em>;
<strong>End with a react {x}</strong>
Configuration options can be given as data-*
attributes on the textarea.
Look at the html source of this page (and the demo page) for example usage.
If you install the demobox
library from npm (npm install -S demobox
) then
you can use the DemoBox
react component in your project.
In this demobox, you can play with the DemoBox
component :).
// @demobox
var value = `\
<strong>
It's demoboxes all the way down...
</strong>
`;
// Try changing position to left, right
// or top, and codeMirror to false
<DemoBox
position='bottom'
header={true}
style={{width: 360}}
codeMirror={true}
initialValue={value}/>
Demobox is for quick and simple jobs, and requires very little configuration to get something usable and beautiful. You don't have time to set up a full-blown website for each little component you create, but you want a way to show the world what you've done in a classy way.
Demobox works with vesion control; jsfiddle etc. does not. Demobox also has first-class support for JSX and React components (and support for HTML/CSS coming soon!).