https://github.com/curran/example-viewer
A presentation tool and programming sandbox for code examples.
https://github.com/curran/example-viewer
education programming teaching web
Last synced: 6 months ago
JSON representation
A presentation tool and programming sandbox for code examples.
- Host: GitHub
- URL: https://github.com/curran/example-viewer
- Owner: curran
- License: mit
- Created: 2017-01-31T13:02:22.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-06-23T09:35:02.000Z (over 8 years ago)
- Last Synced: 2025-03-22T02:41:20.879Z (9 months ago)
- Topics: education, programming, teaching, web
- Language: JavaScript
- Homepage:
- Size: 132 KB
- Stars: 2
- Watchers: 2
- Forks: 1
- Open Issues: 15
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# example-viewer
A presentation tool for code examples. Built using [Redux](http://redux.js.org/) and [D3](https://d3js.org/).
**[Try it out!](https://curran.github.io/d3-in-motion/#1/4/9)**
[](https://curran.github.io/d3-in-motion/#1/4/9)
The above link shows examples in [d3-in-motion](https://github.com/curran/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.
# For Authors
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](http://expressjs.com/) and [Node.js](https://nodejs.org/en/) 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](https://github.com/curran/d3-in-motion).