<!--
title: Demobox subtitle: Demo Page Generator fontPair: Open Sans colors: light-green ga: UA-7002862-5 links: Home: index.html Demos: demo.html Themes: themes.html Github: https://github.com/jaredly/demobox
demobox:
- style-min-width: "300px"
-->
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.
Demo Page Generator
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
demo.md
(||)
---title: Demobox Demossubtitle: Getting rather metafontPair: Open Sanscolors: light-greenlinks: Home: index.html Demos: demos.html Themes: themes.html Github: https://github.com/jaredly/demobox--- # First example ``ˋjavascript// @demobox height=150pxvar 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.
demo.html
rendered page (||)
Configuration
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.
Themes
There are two configuration options associated with theming, colors
and
fontPair
. Look at the themes page for examples and more
information.
Special Headings
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.
demobox.js
drop-in script
The <head>
Included in the <!-- if you want codemirror, that needs to be included separately -->
Markup in the page
// some great code herevar x = element; End with a react {x}
Rendered as a demobox
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 herevar 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.
As a react component
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 :).
// @demoboxvar value = `\<strong> It's demoboxes all the way down...</strong>`; // Try changing position to left, right// or top, and codeMirror to false<DemoBox ='bottom' = = = =/>
FAQ
Why not use jekyll / some other static site generator?
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.
Why not use jsfiddle / plunkr / codepen for embedding editable code snippets?
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!).