Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Example Presentation:
Classic Slides

Henrik Ingo


Any element with the class="notes" will not be displayed. This can be used for speaker notes. In fact, the impressConsole plugin will show it in the speaker console!

Table of Contents

Table of Contents, with links to other slides of this same presentation.

Note that instead of absolute positioning we use relative positioning, with the data-rel-x and data-rel-y attributes. This means the step is positioned relative to the foregoing step. In other words, this is equivalent to data-x="0" data-y="-3000".

A slide with text

This slide has a few paragraphs
(p element) of normal text.

Personally I like centered or even justified text, as it looks less boring. This can of course be set in the css file.

I really like the style on links in these presentations. I modified the border to be beveled, but it's mostly from @bartaz' original demo. @bartaz is the creator of impress.js.

In this slide, we don't even specify the relative position, rather that too is inherited. So this slide will again be 1000px to the right of the previous one.

Bullet points

A blockquote & image

Mother Teresa holding a newborn baby
Spread love everywhere you go.
Let no one ever come to you without leaving happier.

Mother Teresa

Image credit: Peta_de_Aztlan@Flickr. CC-BY 2.0

More text styles

As usual, use em to emphasize,
strong for strong, u for underline,
strike for strikethrough and q for inline quotations.

If you're a software engineer like me, you will often use the <code> tag for monospaced inline text.

Motion effects 101

Items on the slide can

Fly in

Fade in

And zoom in

...just like in PowerPoint. Yeah, I know I'm being lame, but it was fun to learn to do this in CSS3.

This step here doesn't introduce anything new when it comes to data attributes, but you should notice in the demo that some words of this text are being animated. It's a very basic CSS transition that is applied to the elements when this step element is reached.

At the very beginning of the presentation all step elements are given the class of `future`. It means that they haven't been visited yet.

When the presentation moves to given step `future` is changed to `present` class name. That's how animation on this step works - text moves when the step has `present` class.

Finally when the step is left the `present` class is removed from the element and `past` class is added.

So basically every step element has one of three classes: `future`, `present` and `past`. Only one current step has the `present` class.


This version of impress.js includes several add-ons, striving to make this a full featured presentation app.

Impress.js plugins

This presentation also uses speaker notes. They are not visible in the presentation, but shown in the impress console.

If you pressed P only now, this is the first time you see these notes. In fact, there has been notes on preceding slides as well. You can use the navigation controls at the bottom of the impress console to browse back to them.

And did you notice how those bullet points appear one by one as you press space/arrow? That's another plugin, called substeps.


        // `init` API function that initializes (and runs) the presentation.
        var init = function () {
            if (initialized) { return; }
            // First we set up the viewport for mobile devices.
            // For some reason iPad goes nuts when it is not done properly.
            var meta = $("meta[name='viewport']") || document.createElement("meta");
            meta.content = "width=device-width, minimum-scale=1, maximum-scale=1, user-scalable=no";
            if (meta.parentNode !== document.head) {
       = 'viewport';

The Highlight.js library provides really nice color coding of source code. It automatically applies to any code inside a <pre><code> element.

Highlight.js is found under the extras/ directory, since it is an independent third party plugin, not really an impress.js plugin. You have to include it via it's own <link> and <script> tags.


%% This is a comment in mermaid markup graph LR A(Support for
diagrams) B[Provided by
mermaid.js] C{Already
mermaid?} D(Tutorial) E(Great, hope you enjoy!) A-->B B-->C C--No-->D C--Yes-->E classDef startEnd fill:#fcc,stroke:#353,stroke-width:2px; class A,D,E startEnd;


Use \(\LaTeX\), MathML or AsciiMath to properly show mathematical formula.

Mermaid.js, likewise in a href="">extras/ directory, draws SVG diagrams from a MarkDown-like syntax. To learn more about it read the fine manual.
# Markdown.js * [Markdown.js]( integration: for authors in a hurry! * ...or lazy ;-) * Jot down bullet points in *Markdown* * ...have it automatically converted to HTML * Markdown is converted into a presentation client side, in the browser. This is unlike existing tools like [Hovercraft]( and markdown-impress where you generate a new html file on the command line. * [A more advanced Markdown presentation is here.](../markdown/)

Acme Inc Quarterly Profits

Q3(insert here)

More info