This website reflects my personal opinion. None of my (current or former) employers can be held responsible for the content of this site.


INFO: Major demo, page and repository updates on 2014-04-13, bundle now available

INFO: zip bundle, ready to use, available and updated! (last update 2014-04-14)

(first version of this page online since 2012-07-26)

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.

On this page you can find:


Visual Index

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).

deck.js (core) Minimal core including some default extensions. Easily extensible.
fit resize the slides to match the display size.
simplemath Latex math equations in your slides.
svg Loading SVG with options.
step Navigate both by slide and by sub-slide.
events Adds internal notifications.
anim Animations: show/hide, color, size, play video, …
smartsyntax A very short and simple dedicated language to write slide blazingly fast.
clone put a second view on a projector (presenter mode).
timekeeper show a timer and record the time spent on each slide.
metadata use HTML metadata in your slides (author, title, date, …).
progress show progression easily (improved 'status' extension).
attribution easily add comment and link on top of external resources.
container-styling temporarily change top-level style (hide slide counter, …).

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 additional feature. This extensibility have made deck.js very successful at attracting contributions. Introductions to deck.js can be found on the web:

Starting using deck.js and the extensions

Option 1: 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:

Option 2: 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 starter package.

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" in deck.js.

Deck.js: simplemath extension

The simplemath extension allows you to use the latex syntax to type math equations in your slides. This extension uses a lightweight javascript to convert latex expressions to mathml. 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" in deck.js.

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" in deck.js.

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.

DEMO: (low-level)  presentation illustrating "step" in deck.js.
DEMO:  presentation illustrating "anim" in deck.js.

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, etc). If you have troubles with it, don't hesitate to contact me at click-me ;-p

DEMO:  presentation illustrating "smartsyntax" in deck.js.

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" in deck.js.

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 date, etc).

DEMO:  presentation illustrating "metadata" in deck.js.

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" in deck.js. (TO BE DONE)

Deck.js: various extensions and styles

Tiny extensions and tricks are illustrated in a dedicated demo presentation, that shows:

  • 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

DEMO:  presentation illustrating various other extensions in deck.js.

Deck.js: deck.js-theme-builder

I've started a project to generate variations of simple themes. Variations combine:

  • 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.

DEMO:  dark-green-draft / light-blue / light-blue-draft / 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.

DEMO:  see the zip bundle to see how shorter a presentation is with includedeck.

Cheat-sheet: default key bindings

get as pdf (using jsPDF)
Key(s) Extension Description

step Step next: plays animation etc

step Step back
step Next top-level slide
step Previous top-level slide
Z step Goes to the end of the next top-level slide (browsing slides)
M menu Toggles the slide selector (showing all slides)
G goto Goes to slide (open goto menu)
Presenter view
C clone Pops up a clone and trigger the presenter view
timekeeper bang! Logs the current time and reset the greyed-out counter (in presenter view)
SHIFT+ESC timekeeper Reset the presentation timer (in presenter view)
S fit toggle auto fit
B blank blanks the view (requires “blank” extension)
P annotate start annotating a slide (requires “annotate” extension)
Any feedback or remarks? Something missing? Contact me at click-me ;-p