Presentr
👩🏼💻 Configuration based presentation engine. 👨🏽💻
Installation
Yarn
yarn add presentr
NPM
npm install --save presentr
Usage
You need to have a server running with an html file to mount the slides in. Then you have to pass the ID of the element and an object describing your slides.
Note that slides object keys have to be numbered right now: slide1, slide2, slide3, ...
Example
; const slidesConfig = slide1: type: 'simple' header: 'Hello World!' notes: 'Notes for speakers view.' slide2: type: 'list' header: 'This is a list' subHeader: 'Sup there!' list: 'List Item 1' 'List Item 2' 'List Item 3' background: slide3: type: 'quote' quote: 'It compiles... Ship it!' author: 'Someone' ; ;
Boilerplate
If you want a working solution out of the box, just:
- Download this boilerplate.
yarn
ornpm install
.- Add your slides configuration to
slides.js
. yarn run start
ornpm start
Slide Types
simple:
Renders a simple slide with title and subtitle.
Options:
header
- String or array of stringssubHeader
- String
image:
Renders a slide with an image.
Options:
header
- StringsubHeader
- Stringimage
- String
list:
Renders a slide with an list.
Options:
list
- Array of strings
listImage:
Renders a slide with an image and a list.
Options:
header
- StringsubHeader
- Stringimage
- Stringlist
- Array of strings
quote:
Renders a slide with a quote and its author.
Options:
quote
- Stringauthor
- Stringimage
- String
Speaker Mode
All slides accepts a property called notes
, which receive a string.
When you run your server, you can go to /speaker
in another browser tab or window to see a private screen with the current slides progress
and the notes you specified for each slide.
Note
As of now, the engine is very strict with how you use it. I did it to be able to bootstrap simple web-based presentations without any code, just a configuration file. I'll be improving it on the go as I use it and start needing new features, but improvements are always welcome in the form of PRs.
Roadmap
- Add documentation for missing slide types.
- Fix the header to make it fit.
- Provide more configuration options.
- Add MD support.