= DeckTape Antonin Stefanutti https://github.com/astefanutti[@astefanutti] // Meta :description: DeckTape is a high-quality PDF exporter for HTML presentation frameworks. :decktape-version: 3.0.0 // Settings :idprefix: :idseparator: - // Aliases :bullet:  •  ifdef::env-github[] :note-caption: :information_source: :icon-ban: :no_entry_sign: :icon-check: :white_check_mark: :icon-clock: :clock10: :icon-exclamation: :exclamation: :icon-exclamation-dim: :grey_exclamation: :icon-edit: :pencil2: endif::[] ifndef::env-github[] :icons: font :icon-ban: icon:ban[fw,role=red] :icon-check: icon:check-square-o[fw,role=green] :icon-clock: icon:clock-o[fw,role=silver] :icon-exclamation: icon:exclamation[fw,role=red] :icon-exclamation-dim: icon:exclamation[fw,role=silver] :icon-edit: icon:pencil[fw] endif::[] // URIs :uri-badge-npm: https://img.shields.io/npm/v/decktape.svg :uri-badge-node: https://img.shields.io/node/v/decktape.svg :uri-decktape-npm: https://www.npmjs.com/package/decktape :uri-decktape-release: https://github.com/astefanutti/decktape/releases/latest

:uri-puppeteer: https://github.com/GoogleChrome/puppeteer :uri-w3c-uievents-key: https://www.w3.org/TR/uievents-key/

:uri-docker-image: https://github.com/astefanutti/decktape/pkgs/container/decktape :uri-docker-ref: http://docs.docker.com/engine/reference

:uri-bespokejs: http://markdalgleish.com/projects/bespoke.js :uri-deckjs: http://imakewebthings.com/deck.js :uri-dzslides: http://paulrouget.com/dzslides :uri-flowtimejs: https://marcolago.github.io/flowtime.js/ :uri-impressjs: https://impress.js.org :uri-inspire: https://inspirejs.org :uri-nuedeck: https://github.com/twitwi/nuedeck :uri-pageres: https://github.com/sindresorhus/pageres :uri-remark: https://remarkjs.com :uri-revealjs: https://revealjs.com :uri-rise: https://github.com/damianavila/RISE :uri-shower: https://shwr.me :uri-slidy: https://www.w3.org/Talks/Tools/Slidy/ :uri-webslides: https://github.com/jlantunez/webslides

image:{uri-badge-npm}[link="{uri-decktape-npm}"] image:{uri-badge-node}[]

{description}

DeckTape is built on top of {uri-puppeteer}[Puppeteer] which relies on Google Chrome for laying out and rendering Web pages and provides a headless Chrome instance scriptable with a JavaScript API.

DeckTape currently supports the following presentation frameworks out of the box:

{uri-bespokejs}[Bespoke.js]{bullet} {uri-deckjs}[deck.js]{bullet} {uri-dzslides}[DZSlides]{bullet} {uri-flowtimejs}[Flowtime.js]{bullet} {uri-impressjs}[impress.js]{bullet} {uri-inspire}[Inspire.js]{bullet} {uri-nuedeck}[NueDeck]{bullet} {uri-remark}[remark]{bullet} {uri-revealjs}[reveal.js]{bullet} {uri-rise}[RISE]{bullet} {uri-shower}[Shower]{bullet} {uri-slidy}[Slidy]{bullet} {uri-webslides}[WebSlides]

DeckTape also provides a <<generic,generic command>> that works by emulating the end-user interaction, allowing it to be used to convert presentations from virtually any kind of framework. The generic mode is particularly useful for supporting HTML presentation frameworks that don't expose an API or accessible state.

DeckTape's plugin-based architecture exposes an extension API, making it possible to add support for other frameworks or to tailor existing plugins to your specific needs.

DeckTape can optionally be used to capture screenshots of your slide decks in various resolutions (similar to {uri-pageres}[pageres]). That can be useful to make sure your presentations are responsive or to create handouts for them.

You can browse some slide deck <<examples,examples>> below that have been exported with DeckTape.

== Install

=== NPM

Install DeckTape globally and run it:

$ npm install -g decktape
$ decktape

Or locally:

$ npm install decktape
$ `npm bin`/decktape

See the <<faq,FAQ>> for troubleshooting / alternatives.

== Usage

[source]

$ decktape -h

Usage: decktape [options] [command] <url> <filename> decktape version

command one of: automatic, bespoke, deck, dzslides, flowtime, generic, impress, inspire, nuedeck, remark, reveal, shower, slidy, webslides url URL of the slides deck filename Filename of the output PDF file

Options: -s <size>, --size <size> Size of the slides deck viewport: <width>x<height> (e.g. '1280x720') -p <ms>, --pause <ms> Duration in milliseconds before each slide is exported [1000] --load-pause <ms> Duration in milliseconds between the page has loaded and starting to export slides [0] --url-load-timeout <ms> Timeout in milliseconds to use when waiting for the initial URL to load [60000] --page-load-timeout <ms> Timeout in milliseconds to use when waiting for the slide deck page to load [20000] --buffer-timeout <ms> Timeout in milliseconds to use when waiting for a slide to finish buffering (set to 0 to disable) [30000] --screenshots Capture each slide as an image [false] --screenshots-directory <dir> Screenshots output directory [screenshots] --screenshots-size <size> Screenshots resolution, can be repeated --screenshots-format <format> Screenshots image format, one of [jpg, png] [png] --slides <range> Range of slides to be exported, a combination of slide indexes and ranges (e.g. '1-3,5,8') --headless Puppeteer headless mode, one if [new, true, false] [new] --headers HTTP headers, comma-separated list of <header>,<value> pairs (e.g. "Authorization,'Bearer ASDJASLKJALKSJDL'") --chrome-path <path> Path to the Chromium or Chrome executable to run instead of the bundled Chromium --chrome-arg <arg> Additional argument to pass to the Chrome instance, can be repeated --pdf-author <arg> String to set as the author of the resulting PDF document --pdf-title <arg> String to set as the title of the resulting PDF document --pdf-subject <arg> String to set as the subject of the resulting PDF document

Defaults to the automatic command. Iterates over the available plugins, picks the compatible one for presentation at the specified <url> and uses it to export and write the PDF into the specified <filename>.

In addition to the general options listed above, command specific options can be displayed the following way:

$ decktape <command> -h

== Commands

[#automatic] === automatic

Iterates over the available link:plugins[], picks the compatible one for presentation at the specified url and uses it to export and write the PDF into the specified filename.

[#generic] === generic

Emulates the end-user interaction by pressing the key with the specified --key option, and iterates over the presentation as long as:

[loweralpha] . Any change to the DOM is detected by observing mutation events targeting the body element and its subtree, . Nor the number of slides exported has reached the specified --max-slides option.

The --key option must be a list of {uri-w3c-uievents-key}[UI events KeyboardEvent key values], and defaults to ['ArrowRight'], e.g.:

$ decktape generic --key=ArrowDown --key=ArrowRight

== Options

=== --screenshots

Captures each slide as an image at the --screenshots-size resolution, exports it to the --screenshots-format image format and writes the output into the --screenshots-directory directory.

The --screenshots-size option can be set multiple times. For example:

$ decktape --screenshots --screenshots-size=400x300 --screenshots-size=800x600

=== --slides

Exports only the slides specified as a series of slides indexes and ranges, e.g.:

[source,shell]

Capture a single slide

$ decktape --slides 1

Capture a series of slides

$ decktape --slides 1,3,5

Capture a range of slides

$ decktape --slides 1-10

Capture a combination of slides and ranges

$ decktape --slides 1,2,5-10

The rendering stops and the file written out after the largest numbered slide is exported.

== Examples

The following slide deck examples have been exported using DeckTape:

[cols="1v,1v,1v"] |=== |HTML5 Presentation |Framework |Exported PDF

|https://revealjs.com/demo/[Reveal.js Demo] |reveal.js |https://astefanutti.github.io/decktape/examples/reveal-js-demo.pdf[reveal-js-demo.pdf] (2.0MB)

|https://tdd.github.io/devoxx-es6-maintenant/[ES6+ maintenant !] |reveal.js |https://astefanutti.github.io/decktape/examples/devoxx-es6-maintenant.pdf[devoxx-es6-maintenant.pdf] (2.3MB)

|https://github.com/hakimel/reveal.js/blob/360bc940062711db9b8020ce4e848f6c37014481/test/examples/math.html[reveal.js MathJax example] |reveal.js |https://astefanutti.github.io/decktape/examples/reveal-js-mathjax.pdf[reveal-js-mathjax.pdf] (0.3MB)

|https://artificer.jboss.org/slides/general/opensource-getting-involved.html[Getting Involved in Open Source] |reveal.js |https://astefanutti.github.io/decktape/examples/opensource-getting-involved.pdf[opensource-getting-involved.pdf] (0.6MB)

|http://astefanutti.github.io/further-cdi[Going Further with CDI] |Asciidoctor + DZSlides |https://astefanutti.github.io/decktape/examples/going-further-with-cdi.pdf[going-further-with-cdi.pdf] (2.4MB)

|http://imakewebthings.com/deck.js[Deck.js Modern HTML Presentations] |deck.js |https://astefanutti.github.io/decktape/examples/deck-js-presentation.pdf[deck-js-presentation.pdf] (0.5MB)

|https://remarkjs.com[The Official Remark Slideshow] |remark |https://astefanutti.github.io/decktape/examples/remark-js-slideshow.pdf[remark-js-slideshow.pdf] (0.15MB)

|https://joshbode.github.io/remark/ansi.html[Coloured Terminal Listings in Remark] |remark |https://astefanutti.github.io/decktape/examples/remark-js-coloured-terminal.pdf[remark-js-coloured-terminal.pdf] (0.12MB)

|https://www.w3.org/Talks/Tools/Slidy[HTML Slidy: Slide Shows in HTML and XHTML] |Slidy |https://astefanutti.github.io/decktape/examples/html-slidy-presentation.pdf[html-slidy-presentation.pdf] (0.5