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)
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:
The picture below shows the content of the provided bundle.
Green boxes are my extensions (inludedeck 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:
Starting using deck.js and the extensions
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.
If you're not a git user and/or prefer to just download and unzip!
ZIP Bundle to Download: you get a
Description of my extensions
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"
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"
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"
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"
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: presentation illustrating "smartsyntax"
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"
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"
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)
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
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
Any feedback or remarks? Something missing? Contact me at
click-me ;-p @nospam.com
||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)