This package is currently under development. It's not recommended to create real presentations with it just yet. API may change or be removed without a notice in the work-in-progress stage.
Presenteer is a presentation engine that makes each presentation a piece of art.
- No opinionated styling, use your favorite solution;
- Rich build-in themes to get started fast;
- React and its vast ecosystem at your disposal;
- Themes written in semantic HTML. Focus on presentation, not architecture;
- Surgical control over a slide's sub-state;
$ npx presenteer init my-deck
my-deckwith the name of your talk. Presenteer will create that directory and bootstrap a new presentation in it.
Once the command finishes, navigate to the presentation's directory and run:
$ npm start
This would spawn a local preview server. Create a great presentation!
npm install presenteer
In Presenteer each slide is a React component. Let's start by creating a single slide:
// slides/SlideOne.jsximport React from 'react'import Slide from 'presenteer'const SlideOne =<Slide><h1>First slide</h1></Slide>
Once your slides are ready, finish by creating a master slide:
// MasterSlide.jsximport React from 'react'import Provider from 'presenteer'import SlideOne from './slides/SlideOne'// Inculde the themeimport 'presenteer/build/themes/default.css'const MasterSlide =<Provider><SlideOne /></Provider>
Each slide must be a direct child of the
<Provider/> component in order for the engine to render slides in correspondence to the active slide index.
Run the presentation
view CLI command to run your presentation:
For example, to preview the master slide at
./MasterSlide.jsx you would have to run:
$ presenteer view ./MastereSlide.jsx
Bootstraps a new presentation project.
$ presenteer init my-deck
Launches a local preview server for the given presentation. Meant for developing a presentation.
||A file path to the master slide relative to the current working directory.|
||A custom port number for the preview server.|
||A file path to the custom webpack configuration to merge with the Presenteer's default configuration.|
$ presenteer view ./MasterSlide.jsx --port 8080
import Provider from 'presenteer'
A provider component for the entire presentation deck. Responsible for slides' rendering and navigation.
||A React component to render alognside each slide. Useful for fixed headers/footers with a presenter's information.|
Programatic slides navigation
In order to navigate between slides programatically, use the
Example of programatic navigation
import Provider Slide useNavigation from 'presenteer'const MyDeck =<Provider><SlideOne /><SlideTwo /></Provider>const SlideOne =const next =return<Slide><h1>Slide one</h1><button =>Go to the next slide</button></Slide>const SlideTwo =const prev =return<Slide><h1>Slide two</h1><button =>Go to the previous slide</button></Slide>
Each slide can have a set of keyframes, that act like a sub-slide.
Keyframes is a powerful slide state management tool that allows to change a slide's context over navigation, and bind anything to the navigation state (i.e. animations or content).
- Keyframes can be navigated the same way as slides;
- Keyframes are reproducible, meaning any keyframe can be directly accessed at any point of time;
- By default, each slide has exactly 1 keyframe;
- The first keyframe is the initial state of a slide;
useKeyframesis exported as a React Hook. All React Hooks rules apply.
import React from 'react'import Provider Slide useKeyframes from 'presenteer'const MyPresentation =<Provider><SlideOne /></Provider>const SlideOne =const text =return<Slide><p>Some things never change</p><p>text</p></Slide>
import React from 'react'import Provider Slide useKeyframes from 'presenteer'import useSpring animated from 'react-spring'const MyPresentation =<Provider><SlideOne /></Provider>const SlideOne =const animationState =const styles =return<Slide><animated.div =>Text</animated.div></Slide>
Custom webpack configuration
Presenteer comes with the sensible default webpack setup to handle ES modules, styles, and images. However, you may want to extend the default configuration depending on your needs.
Create a partial custom webpack configuration:
// webpack.config.jsmoduleexports =module:rules:// This example enables SCSS supporttest /\scss$/use: 'style-loader' 'css-loader' 'sass-loader'
Your custom webpack configuration is merged with the default one using
Launch the Presenteer and point it to your custom webpack config using the
$ presenteer view ./MasterSlide.jsx --webpackConfig=webpack.config.js