yarn add presentr

npm install --save presentr

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, ...

import { presentr } from 'presentr';

const slidesConfig = {
  slide1: {
    type: 'simple',
    header: 'Hello World!',
    notes: 'Notes for speakers view.'
    width: '80vw',
  },
  slide2: {
    type: 'list',
    header: 'This is a list',
    subHeader: 'Sup there!',
    list: ['List Item 1', 'List Item 2', 'List Item 3'],
    background: require('./assets/background.jpg'),
  },
  slide3: {
    type: 'quote',
    quote: 'It compiles... Ship it!',
    author: 'Someone',
  },
};

presentr('app', slidesConfig);

If you want a working solution out of the box, just:

1. Download this boilerplate.
2. yarn or npm install.
3. Add your slides configuration to slides.js.
4. yarn run start or npm start

Renders a simple slide with title and subtitle.

• header - String or array of strings
• subHeader - String
• width - String

Renders a slide with an image.

• header - String
• subHeader - String
• image - String
• width - String

Renders a slide with an list.

• list - Array of strings
• width - String

Renders a slide with an image and a list.

• header - String
• subHeader - String
• image - String
• list - Array of strings
• width - String

Renders a slide with a quote and its author.

• quote - String
• author - String
• image - String
• width - String

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.

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.

• Add documentation for missing slide types.
• Fix the header to make it fit.
• Provide more configuration options.
• Add MD support.