Minimalistic javascript presentation-library. Zero dependencies. Can be used in combination with frameworks like Bootstrap, Materialize, Vue etc.Features:Simple usageNo jQueryNo dependenciesHackable / ExtensibleUltra small, only 1.8 kB gzipped

Core Java Script



Minimalistic, Hackable, Fast Presentation Library.

License MIT Webpack No dependencies Build Status Current version Support me


  • Simple usage
  • No jQuery
  • No dependencies
  • Hackable / Extensible
  • Ultra small, only 1.8 kB gzipped

Why another library to provide the ability to create a presentation in your browser? Isn't there already Revealjs which is good and reliable? Yeah, thought the same. But I was looking for a library which I can use in combination with React, Vue, Bootstrap, Materialize or whatever library I want. Something which only provides the essential functionalities like slides and fragments. So I've decided to write an absolutly basic, simple but functional library to provide these things.



Install package:

$ npm install @simonwep/presentr --save

Include code and style:

import Presentr from 'Presentr';



<script src=""></script>


<script src="node_modules/@simonwep/presentr/dist/presentr.min.js"></script>


// Simple example, see optional options for more configuration. const presentr = new Presentr({      // Selector for each slide     slides: '.presentr .slides > section' });

Optional options

const presentr = new Presentr({       // Query selector to your slides.     slides: '.presentr .slides > section',      // Query selector for each fragment of the presentaion.     fragments: '.frag',      // Class which will be added to the current and previous slides.     activeSlideClass: 'active',      // Class which will be added only to the current slide.     currentSlideClass: 'current-slide',      // Same functionality, but for fragments.     activeFragmentClass: 'active',     currentFragmentClass: 'current-frag',          /**      *  Can be used to group fragments.      *  Eg. Apply to multiple elements 'g-a' and they will       *  all get active until the first element wich this group       *  has been reached.      */     groupPrefix: 'g-',      // Start index. Does not change the slide sequence.     slideIndex: 0,      // Keyboard shortcuts.     shortcuts: {          // Jump to next / previous slide         nextSlide: ['d', 'D'],         previousSlide: ['a', 'A'],          // Jump to first / last slide         firstSlide: ['y', 'Y'],         lastSlide: ['x', 'X'],          // Jumpt to next / previous fragement. If the first or last fragment is reached,         // the next action would jump to the next / previous slide.         nextFragment: ['ArrowRight', 'ArrowDown'],         previousFragment: ['ArrowLeft', 'ArrowUp']     },      // Will be called on every slide change.     onSlide(state) {         state.presentr,        // Current instance         state.slideIndex,      // Current slide index         state.slides,          // Slides as HTMLElements (Array)         state.slidePercent,    // Decimal percent value of how much of your slides are over         state.fragmentIndex,   // Current fragment index         state.fragments,       // Fragments as array in an array which index is the slide index         state.fragmentPercent  // Same as slidePercent but for fragments on the current slide     },      // Will be called on every fragment change.     onFragment(state) {         // Same as onSlide     },      // Will be called on every slide or fragment change.     onAction(state) {         // Same as onSlide     },      // Initialization event, will be called on first initialization of presenter.     onInit(state) {         // Same as onSlide     } });


  • presentr.nextSlide() - Jump to next slide.
  • presentr.previousSlide() - Jump to previous slide.
  • presentr.firstSlide() - Jump to first slide.
  • presentr.lastSlide() - Jump to last slide.
  • presentr.jumpSlide(index:Number) - Jump to a specific slide.
  • presentr.nextFragment() - Jump to next fragment, if end reached the next slide will be shown.
  • presentr.previousFragment() - Jump to previous fragment, if start reached the previous slide will be shown.
  • presentr.jumpFragment(index:Number) - Jump to a specific fragment on the current slide.
  • presentr.destroy() - Destroys the presentr instance and unbinds all event-listeners.


If you want to open a issue, create a Pull Request or simply want to know how you can run it on your local machine, please read the Contributing guide.

You May Also Like