A presentation tool for code examples. Built using Redux and D3.
The above link shows examples in d3-in-motion, a project containing examples only, that uses this example-viewer package for presentation.
Features:
- CTRL + Right/Left arrow keys to navigate between examples.
- Live code editing environment with instant feedback.
- Click on a number to get a slider.
- Click on hex colors to get a color picker.
This tool is not only for presentation, but also for creation.
- CTRL + S will save the current example
- CTRL + I create (insert) a new example
For these to work, you'll need to start the server locally with
npm start
This server uses Express and Node.js to write the examples to the file system.
To create a new project that just contains the content, and uses this package via NPM, create a new project and run
npm init
npm install -S example-viewer
In your package.json file, you can set up the example viewer to be your startup script:
"scripts": {
"start": "example-viewer"
}
Then when you run npm start in your project, the index.html from this package will be copied into the root of your project, and the server will be started so you can save files.
Once example of a project that depends on this module is d3-in-motion.