Where to Find the Source and Learn More About Using impress.js

Updated

The official site, impress.js.org, points you to the source itself: its “use the source” line is the main route to learning the tool. impress.js is a code-based presentation library, not a hosted editor, so you author slides in HTML and position them on an infinite canvas with CSS3 transforms and transitions. Expect to read and edit code rather than click through a visual builder.

What the Site Tells You

The homepage is itself a demo presentation. It describes impress.js as a presentation tool “inspired by the idea behind prezi.com and based on the power of CSS3 transforms and transitions in modern browsers.” It invites you to “visualize your big thoughts and tiny ideas by positioning, rotating and scaling them on an infinite canvas,” and notes the presentations are in 3D.

Two practical details come from the same page:

  • Navigation: use the spacebar or arrow keys; press P to launch the speaker console.
  • Browser support: if your browser lacks the required features, you get a simplified version of the presentation. The site recommends the latest Chrome, Safari, or Firefox for the best experience.

How to Start Learning

  1. Open the official site and step through the demo presentation with the spacebar or arrow keys. This shows what the transform-and-transition model produces before you write any code.
  2. Read the source of that page. The site’s own advice is to “use the source” — the presentation you are viewing is built with the library, so its HTML and CSS are the working example.
  3. Build a minimal deck. Create an HTML file, load impress.js, and mark up each step as an element with positioning data. Your expected result is a page where steps move, rotate, and scale into view as you navigate.
  4. Verify in a modern browser. If the deck appears as a flat, simplified page, the browser is missing required features or the library did not load — check both before debugging your step markup.

What to Expect From the Approach

Because layout is expressed through CSS transforms, you decide where each idea sits on the canvas and how the view travels between them. That is the core difference from slide-based tools, which advance through a fixed sequence of frames. The trade-off is that there is no hosted editor described on the site: you work directly in code, and the source is your documentation.

If you want a quick sense of whether the style suits your talk, run the homepage demo first. If the movement and 3D positioning fit your material, move on to reading its source and building a small deck of your own.