Skip to content
Get packs

Guide · Open source

How to use impress.js: setup, slides and tips

Updated · written with AI from the project's own documentation and checked against our catalogue data

impress.js is a JavaScript framework for building presentations that run in a web browser. It moves between slides placed on a large canvas using CSS3 3D transforms and transitions, in the zoomable style of prezi.com. This guide explains how to get the source, where to find examples, and what to check before you present with it.

impress.jsimpress/impress.js · ★ 38.2k · MIT

Quick start

  1. 1Check prerequisites. If you plan to build or develop, make sure you have Node.js 7.6 or newer and npm. Plain presentation use does not need them.
  2. 2Clone the repository. Run git clone --recursive https://github.com/impress/impress.js.git to get the source with its plugins.
  3. 3Enter the folder. Run cd impress.js to move into the project directory.
  4. 4Open the demo. Open index.html, the official demo, and read its comments to see how slides are marked up.
  5. 5Start from a template. Copy examples/classic-slides/index.html if you want a simple, rectangular slide layout.
  6. 6Link impress.js and build your slides. Include js/impress.js in your HTML header, or a versioned CDN link, and write your slides in HTML and CSS.
  7. 7Test in your presenting browser. Open the presentation in a recent Firefox or Chrome and check the transitions before the event.

What impress.js is and who it suits

You write the presentation as HTML and CSS, and the library handles the movement between slides. The project is released under the MIT licence and is written in JavaScript.

It suits web developers who want a custom, browser-based slide deck, and designers who want spatial, animated layouts. It is less suitable if you need a point-and-click editor or a no-code tool, because the work is done in HTML, CSS and JavaScript.

Get the impress.js source code

The README gives a clone-and-build route. Clone the repository with the recursive flag, then enter the project folder.

If you want a smaller checkout, you can leave out the recursive option. The README notes that this leaves out extra plugins. Node.js 7.6 or newer and npm are only needed for development and building.

  • Prerequisites for development and building: Node.js 7.6 or newer, and npm
  • Plain use in a presentation does not require Node or npm, according to the repository structure notes
git clone --recursive https://github.com/impress/impress.js.git cd impress.js

Learn the file layout before you build

The js/impress.js file is a concatenation of the core src/impress.js and all the plugins. The README says this is the file you traditionally link to in a browser.

The css/ folder holds a demo stylesheet. The README states this file is not required for your own presentations, because impress.js creates the CSS it needs dynamically.

Start from examples/classic-slides/index.html if you want a traditional, rectangular, PowerPoint-like layout.

  • index.html: the official demo, documented through comments
  • examples/: additional demos, including Classic Slides
  • src/ and src/plugins/: core code and plugins
  • extras/: plugins not enabled by default, added with their own script element
  • build.js: creates js/impress.js

Use the demo and documentation as your tutorial

The README points to the HTML source of the official demo as a good example, and says it contains comments explaining features. For styling, look at the demo CSS to see how the classes provided by impress.js are used. The JavaScript source also has comments on how it works.

Reference documentation for the core features and API is in DOCUMENTATION.md. A Getting Started guide, GettingStarted.md, covers how to include the library in your HTML header.

  • Read index.html for a commented example
  • Read DOCUMENTATION.md for the core API
  • Read GettingStarted.md for how to include the script

Include impress.js with a direct link

The README lists CDN links to individual versions of js/impress.js. You can include one of these directly in your HTML file's header. The README points to the Getting Started guide for how-to details.

The README lists version 2.0.0, version 1.1.0 and a source link. Check the GitHub Releases page for the latest stable release.

  • Versioned CDN links are listed in the README
  • The Getting Started guide shows the include step
https://cdn.jsdelivr.net/gh/impress/impress.js@2.0.0/js/impress.js

Check browser support before you present

impress.js uses the DataSet API, ClassList API, CSS 3D Transforms and CSS Transitions. The project says recent versions of Firefox and Chrome are known to work well, and reports that IE now works too.

The README says the typical use is presenting from your own laptop. If you embed presentations in a web page, some visitors may not see them correctly, or at all. Test on the browser you will actually use.

  • Best fit: presenting from your own laptop in a modern browser
  • Risk: embedded presentations for many visitors on older browsers

What people use it for

  • Presenting a custom talk from your own laptop in a modern browser
  • Building a spatial, zoomable layout for a design or portfolio talk
  • Starting from the Classic Slides template for a PowerPoint-style deck
  • Embedding an animation or presentation in a web page, with the compatibility caveat in mind

Frequently asked questions

Is impress.js free to use?

Yes. The README states that impress.js is released under the MIT License. Check the LICENSE file in the repository for the full terms.

What do I need to install impress.js?

For development and building, you need Node.js 7.6 or newer and npm. The README says impress.js itself does not depend on Node or npm for normal use, so you can include js/impress.js in an HTML page.

How do I install impress.js?

Run git clone --recursive https://github.com/impress/impress.js.git, then cd impress.js. You can also include a versioned CDN link to js/impress.js in your HTML header.

Which browsers work with impress.js?

The README says recent versions of Firefox and Chrome are known to work well, and reports that IE now works too. It relies on CSS 3D Transforms, CSS Transitions, the DataSet API and the ClassList API.

Is there a visual editor for impress.js?

The README does not describe a built-in editor. It names Impressionist, a sibling project described as a 3D GUI editor for creating impress.js presentations.

How does impress.js compare to reveal.js?

The source does not compare them in detail. impress.js focuses on spatial, zoomable slides using CSS3 transforms, while reveal.js is listed as a comparable project. Pick based on whether you want a spatial layout or a traditional slide flow.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

impress.js suits web developers and designers who want a custom, animated, spatial presentation that runs in a modern browser and who are comfortable with HTML, CSS and JavaScript. If you need a point-and-click editor, no-code tooling, or reliable display for many visitors on older browsers, choose another option such as a traditional slide tool or reveal.js.

Install options & downloads