DEV Community

207studio
207studio

Posted on

Playing .pptx decks in the browser with their animations, no server

I'm an elementary school teacher in Korea, and most of my lessons live in PowerPoint files. I wanted those decks to play inside my own app, one click at a time, the way they do in a classroom. Converting to PDF or images loses the click sequence, and sending files to a conversion server wasn't an option for an offline classroom.

This is getting more relevant. A recent post says ChatGPT's Space can now create slide decks and, in the web version, export them to PowerPoint, PDF or Google Slides (on Pro, Business and Enterprise plans). However the deck was made, by a person or an AI, the output is still a .pptx file that something has to display.

What "playing" a deck means

A .pptx is a zip of XML parts: slide masters, layouts, shapes, text, images, and a timing tree that says what happens on each click. Showing a slide is a rendering problem. Playing it means also walking that timing tree:

  1. Render the slide to HTML and SVG, keeping layout, text and images where PowerPoint put them.
  2. Group the animations by click, so each press of the arrow key runs the next group.
  3. Run entrance, exit and emphasis effects in order.
  4. Between slides, match shapes for morph transitions so a shape moves and resizes instead of cutting.
  5. Start and stop embedded audio and video at the right step.

Doing it all client-side

I built this as a JavaScript engine that runs entirely in the browser. There is no server conversion and no Office install. Serve the player folder from any static web server and open it. The same folder also loads in a WebView, so on iOS, iPadOS and macOS it works inside a WKWebView, and Android and Electron WebViews work the same way. That is what made it usable offline in a classroom.

The demo runs in three steps:

python3 -m http.server 8000
open http://localhost:8000/demo.html
press → or Space to step through the deck
Enter fullscreen mode Exit fullscreen mode

Broken files

Real decks are messy. A common case is a stray & character in the slide XML. The engine repairs that and plays the slide normally. If the XML is still broken, it renders what it can and reports an error instead of silently dropping the slide, so you know which slide needs a look.

Limits

It does not promise full PowerPoint compatibility. Ordinary slide transitions fall back to a fade, and morph is the transition it really plays. Test your own decks before relying on it.

Free options first

If you only need to view slides, look at free projects such as @web-ppt/viewer-core or pptx-viewer first. I packaged mine as PPTX Player SDK for people who want one client-side engine with full source and no server. I made it, so take this as a maker's note rather than a review. One-time purchase.

https://207studio.dev/products/pptx-player-sdk/

Top comments (0)