Tell a spatial story.
Give every idea a meaningful place, scale, and direction.
Independent community guide · v2.0.0
Presentwithout limits.
Move beyond ordinary slide decks. Learn how to position, rotate, scale, and connect ideas across a cinematic 3D canvas using HTML, CSS, and impress.js.
Infinite canvas
CSS transforms
Keyboard navigation
3× clearer
01Context
02Flow
03Impact
Make it memorable.
Zoom out and reveal how every part connects.
Built with familiar web technology
HTML5CSS 3DJavaScriptData AttributesModern Browsers
Why impress.js
The web is your presentation canvas.
Instead of moving through a fixed stack of slides, impress.js lets you create a visual journey where position and scale become part of the story.
Spatial storytelling
Place ideas anywhere on a large canvas and use movement to communicate hierarchy, sequence, and connection.
Real 3D transforms
Rotate, scale, and position each step with simple data attributes powered by modern CSS transforms.
Plain web code
Create content with semantic HTML, style it with CSS, and add custom behavior using ordinary JavaScript.
Presenter controls
Navigate with keyboard, touch, or links while optional plugins add progress, notes, and speaker-console tools.
Flexible plugins
Extend your deck with extras such as navigation, substeps, media control, toolbar actions, and more.
Easy to publish
A presentation is simply a web page, so you can host it on any static server and share one clean URL.
Simple workflow
From blank file to wow moment.
1
Add the canvas
Create an #impress container and add each scene as a reusable step.
2
Map the journey
Use data attributes to define coordinates, rotation, scale, and depth.
3
Initialize and present
Load the library, call impress().init(), and navigate your story.
<div id="impress">
<section class="step"
data-x="0" data-y="0">
<h1>Your big idea</h1>
</section>
<section class="step"
data-x="1200"
data-rotate="90">
<h2>A new perspective</h2>
</section>
</div>
<script>impress().init();</script>
Starter templates
Begin with a strong visual system.
Download a complete HTML deck, replace the sample content, and make it yours.
Choose your tool
When impress.js is the right fit.
| Capability | impress.js | Reveal.js | Marp | Traditional slides |
|---|---|---|---|---|
| Free-form spatial canvas | Excellent | Limited | No | Manual |
| 3D rotation and zoom | Native | Transitions | No | Limited |
| Markdown-first authoring | Plugin/custom | Supported | Core workflow | No |
| Maximum HTML/CSS freedom | Full | Full | Theme-based | Limited |
| Best for | Spatial stories | Feature-rich decks | Fast Markdown decks | General business |
“The best impress.js decks use motion to explain relationships, not simply to decorate every transition.”
Common questions
Everything you need before starting.
Yes. It is designed around CSS transforms, transitions, and browser APIs available in current desktop browsers. Always test your final deck on the exact device and browser you will present from.
No build process is required for a basic deck. You can load the library in a script tag, write ordinary HTML and CSS, then call the initialization function.
It can work on touch devices, but complex spatial layouts are usually designed for a presentation screen. Create responsive fallbacks and test the experience at smaller sizes.
No. This is an independent educational guide. The official demo and source repository are linked throughout the website.
Turn your next talk into a journey.
Start with a small, reliable deck. Add motion only where it strengthens the story, then test it on the device you will use on stage.