Top Related Projects
The HTML Presentation Framework
A simple, in-browser, markdown-driven slideshow tool.
It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.
reveal.js on steroids! Get beautiful reveal.js presentations from any Markdown file
The entrance repository of Markdown presentation ecosystem
Quick Overview
DeckTape is a high-quality PDF exporter for HTML5 presentation frameworks. It supports various popular presentation tools like reveal.js, Remark, and others, allowing users to convert their web-based presentations into PDF format while maintaining the original styling and layout.
Pros
- Supports multiple HTML5 presentation frameworks
- Produces high-quality PDF output with accurate rendering
- Offers both CLI and programmatic usage options
- Actively maintained and regularly updated
Cons
- Requires Node.js and npm to be installed
- May have occasional issues with complex animations or transitions
- Limited customization options for PDF output
- Can be slower for large presentations with many slides
Getting Started
To use DeckTape, follow these steps:
- Install Node.js and npm if not already installed.
- Install DeckTape globally:
npm install -g decktape
- Convert a presentation to PDF:
decktape reveal https://example.com/presentation.html presentation.pdf
Replace reveal with the appropriate framework name and provide the URL or local path to your presentation.
For more advanced usage and options, refer to the DeckTape documentation on GitHub.
Competitor Comparisons
The HTML Presentation Framework
Pros of reveal.js
- Designed for creating interactive HTML presentations
- Extensive customization options and themes
- Large community and ecosystem of plugins
Cons of reveal.js
- Requires knowledge of HTML/CSS/JavaScript for advanced customization
- May not be suitable for users who prefer traditional slide-based tools
Code Comparison
reveal.js:
<div class="reveal">
<div class="slides">
<section>Slide 1</section>
<section>Slide 2</section>
</div>
</div>
Decktape:
decktape reveal https://example.com/presentation.html presentation.pdf
Key Differences
- Purpose: reveal.js is for creating presentations, while Decktape is for converting existing presentations to PDF
- Usage: reveal.js requires web development skills, Decktape is a command-line tool
- Output: reveal.js produces interactive web-based presentations, Decktape generates static PDFs
Use Cases
- reveal.js: Web developers creating interactive, customizable presentations
- Decktape: Users needing to convert existing web-based presentations to PDF format for offline use or distribution
Community and Support
- reveal.js: Large community, frequent updates, extensive documentation
- Decktape: Smaller community, focused on specific use case, adequate documentation for its purpose
A simple, in-browser, markdown-driven slideshow tool.
Pros of Remark
- Browser-based presentation tool, allowing for easy creation and sharing of slideshows
- Supports Markdown syntax for content creation, making it simple to write and format presentations
- Highly customizable with themes and plugins
Cons of Remark
- Limited export options compared to Decktape
- Requires JavaScript to run presentations, which may not be ideal for all environments
- Less focused on PDF generation and print-ready output
Code Comparison
Remark (HTML and JavaScript):
<!DOCTYPE html>
<html>
<body>
<textarea id="source">
# Slide 1
Content for slide 1
---
# Slide 2
Content for slide 2
</textarea>
<script src="https://remarkjs.com/downloads/remark-latest.min.js"></script>
<script>var slideshow = remark.create();</script>
</body>
</html>
Decktape (Command-line usage):
decktape remark https://remarkjs.com/remarks.html remarks.pdf
While Remark focuses on creating and presenting slideshows in the browser using Markdown, Decktape is primarily a tool for converting various presentation formats (including Remark) to PDF. Remark offers more flexibility in content creation and live editing, while Decktape excels in generating high-quality PDF outputs from existing presentations.
It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.
Pros of impress.js
- Interactive and dynamic presentation framework for creating stunning web-based slideshows
- Supports 3D transformations and transitions for visually appealing presentations
- Highly customizable with CSS and JavaScript, allowing for creative freedom
Cons of impress.js
- Requires coding knowledge to create presentations, which may be challenging for non-technical users
- Browser compatibility issues may arise, especially with older versions or less common browsers
- Performance can be affected when using complex animations or large numbers of slides
Code Comparison
impress.js:
<div id="impress">
<div class="step" data-x="0" data-y="0">Slide 1</div>
<div class="step" data-x="1000" data-y="500" data-scale="2">Slide 2</div>
</div>
<script>impress().init();</script>
Decktape:
const decktape = require('decktape');
decktape.render('https://example.com/presentation', 'output.pdf', {
size: '1024x768'
});
Note: Decktape is primarily used for converting web presentations to PDF, while impress.js is for creating web-based presentations. The code comparison shows their different purposes and usage.
reveal.js on steroids! Get beautiful reveal.js presentations from any Markdown file
Pros of reveal-md
- Allows creating presentations using Markdown, which is simpler and faster than HTML
- Supports live-reloading for quick editing and previewing
- Includes built-in themes and customization options
Cons of reveal-md
- Limited to creating Reveal.js presentations only
- May require additional setup for advanced features or custom styling
- Less flexible for converting existing presentations in various formats
Code Comparison
reveal-md:
# Slide 1
- Point 1
- Point 2
---
# Slide 2
Content for slide 2
decktape:
const decktape = require('decktape');
decktape.render('https://example.com/presentation', 'output.pdf', {
size: '1024x768'
});
Key Differences
- Purpose: reveal-md is for creating presentations, while decktape is for converting presentations to PDF
- Input format: reveal-md uses Markdown, decktape works with various presentation frameworks
- Output: reveal-md generates HTML presentations, decktape produces PDF files
- Flexibility: decktape supports multiple presentation frameworks, reveal-md is specific to Reveal.js
- Use case: reveal-md is ideal for creating new presentations quickly, decktape is better for archiving or sharing existing presentations
The entrance repository of Markdown presentation ecosystem
Pros of Marp
- Supports creating presentations directly from Markdown
- Offers a live preview feature for real-time editing
- Provides multiple themes and customization options
Cons of Marp
- Limited to specific output formats (HTML, PDF)
- Requires learning Marp-specific syntax for advanced features
- Less flexibility in handling existing presentation formats
Code Comparison
Marp (creating a slide):
---
marp: true
---
# Slide 1
Content for slide 1
---
# Slide 2
Content for slide 2
Decktape (converting an existing presentation):
decktape reveal https://example.com/presentation.html output.pdf
Key Differences
- Marp focuses on creating presentations from scratch using Markdown
- Decktape specializes in converting existing web-based presentations to PDF
- Marp offers a more integrated authoring experience
- Decktape provides broader support for various presentation frameworks
Use Cases
- Choose Marp for quickly creating simple, Markdown-based presentations
- Opt for Decktape when you need to convert existing web presentations to PDF
- Use Marp for collaborative editing and version control of presentation content
- Select Decktape for high-fidelity PDF exports of complex web presentations
Convert 
designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
= 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: https://www.docker.com :uri-docker-hub: https://hub.docker.com :uri-docker-image: https://hub.docker.com/r/astefanutti/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]
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
Defaults to the automatic command.
Iterates over the available plugins, picks the compatible one for presentation at the
specified and uses it to export and write the PDF into the specified .
In addition to the general options listed above, command specific options can be displayed the following way:
$ decktape
== 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.5MB)
|https://inspirejs.org[Inspire.js: Lean, hackable, extensible slide deck framework] |Inspire.js |https://astefanutti.github.io/decktape/examples/inspirejs-sample-slideshow.pdf[inspirejs-sample-slideshow.pdf] (1.9MB)
|https://shwr.me[Shower Presentation Engine] |Shower |https://astefanutti.github.io/decktape/examples/shower-presentation-engine.pdf[shower-presentation-engine.pdf] (0.6MB)
|http://mikemaccana.github.io/rejectjs2013[Welcome our new ES5 Overloards] |Bespoke.js |https://astefanutti.github.io/decktape/examples/new-es5-overloards.pdf[new-es5-overloards.pdf] (0.2MB)
|https://formidable.com/open-source/spectacle/[Spectacle: A ReactJS Presentation Library] |Spectacle |https://astefanutti.github.io/decktape/examples/spectacle-reactjs-presentation.pdf[spectacle-reactjs-presentation.pdf] (1.2MB) |===
== Docker
DeckTape can be executed within a Docker container from the command-line using the {uri-docker-image}[astefanutti/decktape] Docker image available on {uri-docker-hub}[Docker Hub]:
$ docker run astefanutti/decktape -h
For example:
-
To convert an online HTML presentation and have it exported into the working directory under the
slides.pdffilename: [source,shell,subs=attributes+] $ docker run --rm -t -vpwd:/slides 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: [source,shell] $ docker run --rm -t -vpwd:/slides -v ~:/home/user astefanutti/decktape /home/user/slides.html slides.pdf -
Or, to convert an HTML presentation that's deployed on the local host: [source,shell] $ docker run --rm -t --net=host -v
pwd:/slides astefanutti/decktape http://localhost:8000 slides.pdf
You may have to use host.docker.internal instead of localhost on macOS and Windows.
You may want to specify a tag corresponding to a released version of DeckTape for the Docker image, e.g. astefanutti/decktape:{decktape-version}.
Besides, it is recommended to use the following options from the {uri-docker-ref}/run[docker run] command:
{uri-docker-ref}/run/#clean-up-rm[--rm]:: DeckTape is meant to be run as a short-term foreground process so that it's not necessary to have the container's file system persisted after DeckTape exits,
{uri-docker-ref}/commandline/run/#mount-volume-v-read-only[-v]:: to mount a data volume so that DeckTape can directly write to the local file system.
Alternatively, you can use the {uri-docker-ref}/commandline/cp[docker cp] command, e.g.:
[source,shell]
Run docker run without the --rm option
$ docker run 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 base Docker container, you can mount your fonts directory as a volume, e.g. for macOS:
[source,shell] $ docker run -v "${HOME}/Library/Fonts:/home/node/.local/share/fonts" ...
== FAQ
=== Install
- I'm using Arch Linux, is there an AUR package?
Yes, it is available at https://aur.archlinux.org/packages/nodejs-decktape/.
=== Usage
- Is it possible to pass arguments to Chrome?
Yes, you can use the --chrome-arg option, e.g.:
+
[source,shell]
$ decktape ...
--chrome-arg=--proxy-server="proxy:8080"
--chrome-arg=--allow-file-access-from-files
The list of Chromium flags can be found https://peter.sh/experiments/chromium-command-line-switches/[here].
=== Troubleshooting
- 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, https://chromium.googlesource.com/chromium/src/+/master/docs/linux_sandboxing.md#User-namespaces-sandbox[here].
As a temporary work-around, you can pass --chrome-arg=--no-sandbox as 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-content flag option, e.g.:
+
[source,shell]
$ 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-security flag option, e.g.:
+
[source,shell]
$ 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 -s option.
The value of -s 1024x768 has 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-pdf or load the print stylesheets in any other way when using Decktape.
== Plugin API
{icon-edit}
Top Related Projects
The HTML Presentation Framework
A simple, in-browser, markdown-driven slideshow tool.
It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.
reveal.js on steroids! Get beautiful reveal.js presentations from any Markdown file
The entrance repository of Markdown presentation ecosystem
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot