How do I make a simple slide deck with impress.js?

Use the Classic Slides example as a template by copying its HTML structure and CSS, then add your content in div elements with specific data attributes for positioning and transitions.

Is impress.js compatible with mobile devices?

It works on modern mobile browsers that support CSS3 3D transforms, but touch navigation may require custom handling, and performance can vary on older devices.

Can I add videos or interactive elements to impress.js?

Yes, you can embed standard HTML5 media or JavaScript interactivity directly, but syncing them with transitions often needs custom coding, as the framework focuses on spatial navigation.

impress.js vs reveal.js: which one should I choose?

impress.js excels at non-linear, 3D spatial presentations with cinematic effects, while reveal.js is better for traditional linear slides with richer built-in features like speaker notes. Pick based on your presentation style.

How to export an impress.js presentation to PDF?

There's no built-in export feature; you'll need external tools like browser print-to-PDF with custom CSS adjustments, which can be unreliable due to the dynamic 3D nature.

Are there any good editors for creating impress.js presentations?

Community projects like Impressionist offer a 3D GUI editor, but they are separate tools; the core impress.js requires manual coding, so editor support is limited and unofficial.

Open-Awesome

impress.js

MITJavaScriptv2.0.0

A presentation framework using CSS3 transforms and transitions to create Prezi-like non-linear presentations in modern browsers.

Visit Website GitHub

38.2k stars6.6k forks0 contributors

What is impress.js?

impress.js is a JavaScript presentation framework that uses CSS3 transforms and transitions to create dynamic, non-linear presentations in modern web browsers. It solves the problem of static, linear slide decks by enabling 3D spatial navigation and smooth animations, inspired by Prezi's approach.

Target Audience

Developers, designers, and presenters who want to create visually engaging, browser-based presentations with non-linear storytelling and modern CSS effects.

Value Proposition

Developers choose impress.js for its lightweight, framework-free approach to building Prezi-like presentations directly with web standards, offering flexibility and creative control without proprietary software.

Overview

It's a presentation framework based on the power of CSS3 transforms and transitions in modern browsers and inspired by the idea behind prezi.com.

Use Cases

Best For

Creating non-linear, spatial presentations for conferences or talks
Building interactive web-based demos with 3D transitions
Developing educational content with animated storytelling
Prototyping immersive web experiences with CSS3 animations
Replacing traditional slide decks with browser-native presentations
Showcasing modern CSS and JavaScript capabilities in live demos

Not Ideal For

Presentations that must work flawlessly on older browsers like Internet Explorer 10 or below
Teams without web development skills who need a drag-and-drop presentation builder
Projects requiring built-in collaboration tools or real-time editing
Situations where presentations need to be easily exported to PDF or printed formats

Pros & Cons

Pros

Hardware-Accelerated Animations

Uses CSS3 transforms and transitions for smooth, performant movements, leveraging modern browser capabilities for seamless presentations, as highlighted in the key features.

Non-Linear Spatial Navigation

Enables creative, Prezi-like storytelling by allowing presenters to move freely in 3D space, breaking away from linear slide constraints for more engaging content.

Extensible Plugin Architecture

Supports plugins for added functionality without bloating the core, with an extras directory for optional features, making it adaptable to specific needs.

Rich Example Library

Includes comprehensive demos like the official demo and Classic Slides, providing templates and practical usage examples to jumpstart development.

Cons

Narrow Browser Support

Relies on modern browsers with CSS3 and DOM APIs like DataSet and ClassList, explicitly excluding older versions and limiting audience reach for web-embedded presentations.

Code-Intensive Setup

Requires proficiency in HTML, CSS, and JavaScript to create presentations, with no graphical interface provided, unlike tools like PowerPoint or Prezi.

Minimal Official Documentation

Heavily relies on source code comments and community wikis for guidance, which can be sparse and challenging for newcomers compared to fully documented frameworks.

Open Source Alternative To

impress.js is an open-source alternative to the following products:

Prezi

PowerPoint

PowerPoint is a presentation program developed by Microsoft as part of the Microsoft Office suite, used to create slideshows with text, images, animations, and multimedia.

Frequently Asked Questions

Related Projects

reveal.js

The HTML Presentation Framework

Stars72,007

Forks16,966

Last commit2 months ago

Swiper

Most modern mobile touch slider with hardware accelerated transitions

Stars41,884

Forks9,639

Last commit3 days ago

slick

the last carousel you'll ever need

Stars28,567

Forks5,753

Last commit4 months ago

PhotoSwipe

JavaScript image gallery for mobile and desktop, modular, framework independent

Stars25,221

Forks3,271

Last commit7 months ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub