Creating Slides With deck.js and its Extensions
This is all about HTML slides (or web based slideshow).
This page shows how to use deck.js with my consolidated contributions implementing the features that I was missing the most: the SVG animations, fitting (proper scaling), math equations, non-verbose syntax, etc.
Recommended for very-quick-start: download the full starterkit or view the demo it contains.
On this page you can find:
The picture below shows the content of the provided bundle.
Green boxes are my extensions (includedeck is not shown, but it helps in making the glue, in all examples).
Minimal core including some default extensions.
resize the slides to match the display size.
Loading SVG with options.
Navigate both by slide and by sub-slide.
Adds internal notifications.
Animations: show/hide, color, size, play video, …
A very short and simple dedicated language to write slide blazingly fast.
put a second view on a projector (presenter mode).
show a timer and record the time spent on each slide.
use HTML metadata in your slides (author, title, date, …).
show progression easily (improved 'status' extension).
easily add comment and link on top of external resources.
Deck.js: Introduction (skip if you know)
Deck.js is an open source system for writing slides/presentations/“powerpoints” that are played in a browser.
From the beginning, deck.js has been designed to be extensible: the core is minimal and extensions are expected to provide
This extensibility have made deck.js very successful at attracting contributions.
Introductions to deck.js can be found on the web:
Description of my extensions
Deck.js: fit extension
The fit extensions provides a proper re-scaling of the slides to the view-port.
This extension avoid discovering problems with low resolution projectors or unusual aspect ratios.
DEMO: presentation illustrating "fit"
Deck.js: simplemath extension
The simplemath extension allows you to use the latex syntax to type math equations in your slides.
Your browser needs to support mathml or have a plugin enabling it.
The MathJax library could also be used for a similar purpose (MathJax is more powerful but heavier).
DEMO: presentation illustrating "simplemath"
Deck.js: svg extensions
The svg extension helps in including external SVG files in your presentations.
For example, if you produce SVG files using inkscape or gnuplot, this extension helps you including them in your presentation.
An SVG file can be included in many ways in an HTML page (e.g., using an img tag).
However, the svg extension takes care of including the SVG files in such a way that they can be both styled using CSS and
animated (by the anim extension).
DEMO: presentation illustrating "svg"
Deck.js: events/step/anim extensions
These extensions provide a way of doing animations within the slides (not only when we change slide).
Try the “anim” demo presentation below to see examples.
(low-level) presentation illustrating "step"
DEMO: presentation illustrating "anim"
Deck.js: smartsyntax extension
The smartsyntax extension removes the need for knowing and writing HTML.
It is a markdown-like, wiki-like syntax that allows you write slides in a more concise way.
No compilation is needed, the interpretation is done every time the page is loaded.
The smartsyntax goes beyond markdown that is too limited for efficient presentation (adding classes to elements, making sections,
If you have troubles with it, don't hesitate to contact me at click-me ;-p @nospam.com.
DEMO: default starterkit presentation illustrating only part of "smartsyntax"
demo of the old version: presentation illustrating "smartsyntax"
Deck.js: clone/timekeeper extensions
The clone extension allows you to create a second window containing your presentation.
This way, you can have a projected screen and a presenter view on your laptop.
When you change slide on the presenter view, the projected screen automatically follows (and vice-versa).
The default style of the presenter view shows the current and the next slide.
The timekeeper extension adds a timer on the presenter view and also records the time of each slide change.
It can be very useful for rehearsals or debriefing.
Timers can be reset using the Escape key (with shift to reset the presentation timer).
DEMO: presentation illustrating "clone" and "timekeeper"
Deck.js: metadata extension
The metadata extension makes it possible to use the title of the HTML page and its metadata in your presentations.
HTML metadata also act as “variables”: your presentation file is cleaner and contains less repetitions (e.g., your name, the
DEMO: presentation illustrating "metadata"
Deck.js: progress extension
The progress extension is an replacement for the default “status” extension (that shows the slide counter).
Progress improves in 3 directions: it is easier to make a simple status that adapts in position and size, it provides very
big flexibility for customized progress (progress bars etc), and it adds the concept of “fake end” (when you have 46 slides
and want the total counter to show 42 instead).
DEMO: presentation illustrating "progress"
Deck.js: various extensions and styles
Tiny extensions and tricks are illustrated in a dedicated demo presentation, that shows:
DEMO: presentation illustrating various other extensions
- attribution extension: to add some text and link on images that come from someone else
- container-styling extension: to set the style of the deck container when a slide is the current one (e.g., to not show the slide counter)
- splash: easily show a splash screen when your presentation is being loaded
I've started a project to generate variations of simple themes.
- a background color either dark or light,
- a dominant color for titles, chosen among six,
- a main font, chosen among two.
There is a separate repository
for these themes.
/ dark-green (default for the examples)
Deck.js: includedeck extension
The includedeck extension is special in the sense that its sole use is to replace much of the boilerplate code in your HTML
file by a much shorter call to includedeck.
With includedeck, your files are more readable and you are less likely to make a mistake when including extensions.
see the zip bundle
to see how shorter a presentation is with includedeck.
Cheat-sheet: default key bindings
get as pdf (using jsPDF)
||Step next: plays animation etc
||Next top-level slide
||Previous top-level slide
||Goes to the end of the next top-level slide (browsing slides)
||Toggles the slide selector (showing all slides)
||Goes to slide (open goto menu)
||Pops up a clone and trigger the presenter view
||bang! Logs the current time and reset the greyed-out counter (in presenter view)
||Reset the presentation timer (in presenter view)
||toggle auto fit
||blanks the view (requires “blank” extension)
||start annotating a slide (requires “annotate” extension)
Starting using deck.js and the extensions
Option 1: use the starterkit
I maintain a starterkit containing all my extensions, some nice fonts and a demo/starter presentation.
It is the simplest and recommended way to begin using deck.js:
Option 2: start from github
All the material presented on this page is on my github repo.
This github repository contains an up-to-date version of the core deck.js together with the extensions that I use (the "events"
+ all my contributions).
To start using it:
- If you want, fork the repository
- Clone the repo (git clone https://github.com/twitwi/deck.js.git , or your fork)
- Copy and edit the empty sample.
- Optionally, you might want more themes (use git clone email@example.com:twitwi/deck.js-theme-builder.git from inside the deck.js folder).
Option 3: start from a zip
If you're not a git user and/or prefer to just download and unzip!
ZIP Bundle to Download: you get a
Any feedback or remarks? Something missing? Contact me at
click-me ;-p @nospam.com