node package manager
Painless code sharing. npm Orgs help your team discover, share, and reuse code. Create a free org »



PDF generator for Bespoke.js

Bespoke Plugin


Download the production version or the development version, or use a package manager.


bespoke-pdf is simultaneously a bespoke plugin, and a gulp task - the bespoke plugin provides hooks for the gulp task. Both pieces are necessary.

This bespoke plugin is shipped in a UMD format, meaning that it is available as a CommonJS/AMD module or browser global.

For example, when using CommonJS modules:

var bespoke = require('bespoke'),
  pdf = require('bespoke-pdf');
bespoke.from('article', [


setup [Function]
bespoke.from('article', [
    setup: function () {  
      //prime slide environment for pdf output
      //for instance, disable the "camera" slide or whatever
delay [Number]

Delay before slide taking begins

evalDelay [Number]

Delay between each shot

When using browser globals:

bespoke.from('article', [

Package managers


$ npm install bespoke-pdf


$ bower install bespoke-pdf

Gulp Task

Once the bespoke-pdf has been included in a presentation, it can be integrated into a gulpfile.

For this part, bespoke-pdf must be installed via npm.

var pkg = require('./package.json'),
  pdf = require('bespoke-pdf'),
  rimraf = require('gulp-rimraf');
gulp.task('pdf', ['connect'], function () { 
  return pdf( + '.pdf')
gulp.task('clean:pdf', function() {
  return gulp.src('dist/' + + '.pdf')

PDF Output Customizations

In some cases, we don't want certain presentation visuals landing in generated PDF's. During PDF generation, bespoke-pdf adds a pdf class to the root <html> element. We can use this class to style any part of the page, e.g. in Stylus:

      display none

Likewise there may be particular slides. Any hidden section element will be removed from the deck prior to PDF generation.

For instance, say we're using bespoke-hash and we have a slide called named-route, we could do

      display none

bespoke-pdf will detect this and remove the slide.

To enable the use markdown without littering it with structural HTML tags, bespoke-pdf also provides another way to style and hide slides by adding a data-pdf-id attribute based on the slides headline, which is determined by the first h1, h2, h3, h4, h5, li, p or span element in that order.

For instance, say there's a slide with an h2 element named "Emphatic Slide!". bespoke-pdf automatically creates a data-pdf-id attribute with the value of emphatic-slide! (we lowercase and replace spaces with dashes).

This allows us to remove it like so:

  display none

See the example/src/styles/main.styl file for an example of this - and notice that example/dist/presentation-hello-world.pdf lacks the "Emphatic Slide!" slide.


MIT License


Sponsored by nearForm