DeckTape is a high-quality PDF exporter for HTML presentation frameworks.
DeckTape is built on top of 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:
Bespoke.js • deck.js • DZSlides • Flowtime.js • impress.js • Inspire.js • NueDeck • remark • reveal.js • RISE • Shower • Slidy • WebSlides
DeckTape also provides a 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 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 below that have been exported with DeckTape.
DeckTape requires Node.js 22.12 or later.
Install DeckTape globally and run it:
$ npm install -g decktape
$ decktapeOr locally:
$ npm install decktape
$ npm exec decktapeSee the FAQ for troubleshooting / alternatives.
$ 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 of [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
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.
Emulates the end-user interaction by pressing the key with the specified --key option, and iterates over the presentation as long as:
-
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-slidesoption.
The --key option must be a list of UI events KeyboardEvent key values, and defaults to ['ArrowRight'], e.g.:
$ decktape generic --key=ArrowDown --key=ArrowRight
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
Exports only the slides specified as a series of slides indexes and ranges, e.g.:
# 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-10The rendering stops and the file written out after the largest numbered slide is exported.
The following slide deck examples have been exported using DeckTape:
| HTML5 Presentation | Framework | Exported PDF |
|---|---|---|
reveal.js |
reveal-js-demo.pdf (2.0MB) |
|
reveal.js |
devoxx-es6-maintenant.pdf (2.3MB) |
|
reveal.js |
reveal-js-mathjax.pdf (0.3MB) |
|
reveal.js |
opensource-getting-involved.pdf (0.6MB) |
|
Asciidoctor + DZSlides |
going-further-with-cdi.pdf (2.4MB) |
|
deck.js |
deck-js-presentation.pdf (0.5MB) |
|
remark |
remark-js-slideshow.pdf (0.15MB) |
|
remark |
remark-js-coloured-terminal.pdf (0.12MB) |
|
Slidy |
html-slidy-presentation.pdf (0.5MB) |
|
Inspire.js |
inspirejs-sample-slideshow.pdf (1.9MB) |
|
Shower |
shower-presentation-engine.pdf (0.6MB) |
|
Bespoke.js |
new-es5-overloards.pdf (0.2MB) |
|
Spectacle |
The image uses Debian slim and the Chrome for Testing version selected by Puppeteer, on both amd64 and arm64.
Puppeteer upgrades update the browser version together with the JavaScript API.
DeckTape can be executed in a container from the command-line using the ghcr.io/astefanutti/decktape container image:
$ docker run ghcr.io/astefanutti/decktape -h
For example:
-
To convert an online HTML presentation and have it exported into the working directory under the
slides.pdffilename:$ docker run --rm -t -v "$(pwd):/slides" ghcr.io/astefanutti/decktape https://revealjs.com/demo/ slides.pdf -
Or, to convert an HTML presentation that’s stored on the local file system in the
homedirectory:$ docker run --rm -t -v "$(pwd):/slides" -v ~:/home/user ghcr.io/astefanutti/decktape /home/user/slides.html slides.pdf
-
Or, to convert an HTML presentation that’s deployed on the local host:
$ docker run --rm -t --net=host -v "$(pwd):/slides" ghcr.io/astefanutti/decktape http://localhost:8000 slides.pdfYou may have to use
host.docker.internalinstead oflocalhoston macOS and Windows.
You may want to specify a tag corresponding to a released version of DeckTape for the container image, e.g. ghcr.io/astefanutti/decktape:3.0.0.
Besides, it is recommended to use the following options from the docker run command:
The container runs as the non-root node user, with UID 1000.
Writing the exported PDF into a mounted volume requires that UID to have write permission on the mounted directory.
Docker Desktop remaps the ownership of the bind mounts transparently, while runtimes that preserve the host UIDs, like Docker Engine on Linux or a rootful Podman machine, can make DeckTape fail with EACCES: permission denied.
In that case, run the container with the UID and GID that own the mounted directory:
$ docker run --rm -t --user "$(id -u):$(id -g)" -v "$(pwd):/slides" ghcr.io/astefanutti/decktape https://revealjs.com/demo/ slides.pdfFor rootless Podman on Linux, use --userns=keep-id to map your UID and GID to the ones of the node user, as the container keeps running as that user:
$ podman run --rm -t --userns=keep-id:uid=1000,gid=1000 -v "$(pwd):/slides" ghcr.io/astefanutti/decktape https://revealjs.com/demo/ slides.pdfOn the hosts enforcing SELinux, like Fedora and RHEL, the mounted directory must also be relabelled with the :z option, so that the container is allowed to access it.
The UID mapping and the SELinux label are enforced independently, so both are required:
$ podman run --rm -t --userns=keep-id:uid=1000,gid=1000 -v "$(pwd):/slides:z" ghcr.io/astefanutti/decktape https://revealjs.com/demo/ slides.pdfAlternatively, you can use the docker cp command, e.g.:
# Run docker run without the --rm option
$ docker run ghcr.io/astefanutti/decktape https://revealjs.com/demo/ slides.pdf
# Copy the exported PDF from the latest used container to the local file system
$ docker cp "$(docker ps -lq):/slides/slides.pdf" .
# Finally remove the latest used container
$ docker rm "$(docker ps -lq)"If your presentation relies on fonts installed on the host system, but not in the container image, you can mount your fonts directory as a volume, e.g. for macOS:
$ docker run -v "${HOME}/Library/Fonts:/home/node/.local/share/fonts" ...To build and smoke-test the image locally:
$ docker build -t decktape:test .
$ bash test/smoke-image.sh decktape:test-
I’m using Arch Linux, is there an AUR package?
Yes, it is available at https://aur.archlinux.org/packages/nodejs-decktape/.
-
Is it possible to pass arguments to Chrome?
Yes, you can use the
--chrome-argoption, e.g.:$ decktape ... \ --chrome-arg=--proxy-server="proxy:8080" \ --chrome-arg=--allow-file-access-from-filesThe list of Chromium flags can be found here.
-
No usable sandbox!
Arch Linux, among other Linux distributions may have the user namespace in the kernel disabled by default. You can verify this by accessing chrome://sandbox in your Chrome browser. You can find more about sandboxing, here. As a temporary work-around, you can pass
--chrome-arg=--no-sandboxas a CLI option. -
Mixed Content: The page was loaded over HTTPS, but requested an insecure resource
Chrome blocks insecure content on secure pages by default. This can be alleviated by passing the
--allow-running-insecure-contentflag option, e.g.:$ decktape ... --chrome-arg=--allow-running-insecure-content
-
Failed to read the 'rules' property from 'CSSStyleSheet': Cannot access rules
Starting Chrome 64, accessing CSS rules in a stylesheet loaded from the local filesystem or an external location violates CORS policies. As some Decktape plugins tweak the CSS rules for better PDF printing, you need to allow access to local files or external stylesheets by setting the
--disable-web-securityflag option, e.g.:$ decktape ... --chrome-arg=--disable-web-security
-
Layout inconsistencies
Decktape relies on Pupeteer to convert each slide in PDF format. Slight layout inconsistencies can result as part of this transformation. One workaround is to set a specific slide size using the
-soption. The value of-s 1024x768has generally worked well in such situations. -
Reveal.js slide generation never finishes
Decktape does not use the built-in PDF support of reveal.js, and instead captures each slide individually. Therefore you must not append
?print-pdfor load the print stylesheets in any other way when using Decktape.