PptxViewJS

🚀 Features

PptxViewJS lets you view and interact with PowerPoint presentations in JavaScript - directly in browsers, React, Vite, Electron, or any modern web environment. The library renders PowerPoint presentations using HTML5 Canvas, providing:

• ✅ High-Quality Rendering - Canvas-based slide rendering with pixel-perfect accuracy
• ✅ Cross-Platform Compatibility - Works in all modern browsers and web frameworks
• ✅ Peer Dependencies - Requires JSZip; Chart.js is optional for chart rendering
• ✅ TypeScript Support - Complete type definitions for excellent developer experience

Works Everywhere

• Supports every major modern browser - desktop and mobile
• Seamlessly integrates with React, Angular, Vue, Vite, and Electron
• Compatible with PowerPoint, Keynote, LibreOffice, and other OOXML presentations

Full-Featured

• View all major slide content: text, tables, shapes, images, charts, and more
• Navigate through presentations with next/previous and direct slide access
• Supports thumbnails, events, and custom rendering options
• Handles complex layouts, themes, and media content

Simple & Powerful

• Ridiculously easy to use - load and view a presentation in 3 lines of code
• Full TypeScript definitions for autocomplete and inline documentation
• Method chaining for fluent, readable code
• Event-driven architecture for custom interactions

Multiple Input Formats

• Load from File objects, ArrayBuffer, or Uint8Array
• Fetch presentations from URLs with automatic error handling
• Supports local files and remote presentations

Modern Architecture

• Canvas-based rendering for optimal performance and quality
• Modular design with clean separation of concerns
• Memory efficient with proper cleanup and resource management

🌐 Live Demos

Try PptxViewJS right in your browser - no setup required.

• Viewer Demo - View presentations in seconds

Perfect for testing compatibility or learning by example - all demos run 100% in the browser.

📦 Installation

Choose your preferred method to install PptxViewJS:

Quick Install (Node-based)

npm install pptxviewjs

yarn add pptxviewjs

CDN (Browser Usage)

Use the UMD build via jsDelivr. Include JSZip (required) before the library. Include Chart.js (optional) if you need chart rendering:

<!-- Required: JSZip -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jszip.min.js"></script>

<!-- Optional: Chart.js (only if your presentations contain charts) -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>

<!-- PptxViewJS UMD build exposes global `PptxViewJS` -->
<script src="https://cdn.jsdelivr.net/npm/pptxviewjs/dist/PptxViewJS.min.js"></script>

Note: JSZip is required for PPTX (ZIP) parsing. Chart.js is optional and only needed when rendering charts.

Peer Dependencies (Node/bundlers)

Install JSZip (required). Install Chart.js if your presentations include charts:

npm install jszip
# Optional (for charts)
npm install chart.js

🚀 Universal Compatibility

PptxViewJS works seamlessly in modern web and Node environments, thanks to dual ESM and CJS builds and zero runtime dependencies. Whether you're building a web app, an Electron viewer, or a presentation platform, the library adapts automatically to your stack.

Supported Platforms

• React / Angular / Vue / Vite / Webpack – just import and go, no config required
• Electron – build native presentation viewers with full filesystem access
• Browser (Vanilla JS) – embed in web apps with direct file handling
• Node.js – experimental; requires a Canvas polyfill (e.g., canvas) for rendering
• Serverless / Edge Functions – use in AWS Lambda, Vercel, Cloudflare Workers, etc.

Builds Provided

• CommonJS: dist/PptxViewJS.cjs.js
• ES Module: dist/PptxViewJS.es.js
• Minified UMD: dist/PptxViewJS.min.js

📖 Documentation

Quick Start Guide

PptxViewJS presentations are viewed via JavaScript by following 3 basic steps:

React/TypeScript

import { PPTXViewer } from "pptxviewjs";

// 1. Create a new Viewer
let viewer = new PPTXViewer({
  canvas: document.getElementById('myCanvas')
});

// 2. Load a Presentation
await viewer.loadFile(presentationFile);

// 3. Render the first slide
await viewer.render();

Script/Web Browser

<canvas id="myCanvas"></canvas>
<input id="pptx-input" type="file" accept=".pptx" />
<button id="prev">Prev</button>
<button id="next">Next</button>
<div id="status"></div>

<script src="PptxViewJS.min.js"></script>
<script>
  const { mountSimpleViewer } = window.PptxViewJS;
  mountSimpleViewer({
    canvas: document.getElementById('myCanvas'),
    fileInput: document.getElementById('pptx-input'),
    prevBtn: document.getElementById('prev'),
    nextBtn: document.getElementById('next'),
    statusEl: document.getElementById('status')
  });
</script>

Need finer control? You can still instantiate new PptxViewJS.PPTXViewer() manually and use the same APIs shown above.

That's really all there is to it!

🎮 Navigation & Interaction

Navigate through presentations with simple, chainable methods:

// Navigate through slides
await viewer.nextSlide();        // Go to next slide
await viewer.previousSlide();    // Go to previous slide
await viewer.goToSlide(5);       // Jump to slide 5

// Get information
const currentSlide = viewer.getCurrentSlideIndex();
const totalSlides = viewer.getSlideCount();

📊 Event System

Listen to presentation events for custom interactions:

// Listen to events
viewer.on('loadStart', () => console.log('Loading started...'));
viewer.on('loadComplete', (data) => console.log(`Loaded ${data.slideCount} slides`));
viewer.on('renderComplete', (slideIndex) => console.log(`Rendered slide ${slideIndex}`));
viewer.on('slideChanged', (slideIndex) => console.log(`Now viewing slide ${slideIndex}`));

🙏 Contributors

Thank you to everyone for the contributions and suggestions! ❤️

Special Thanks:

• Alex Wong - Original author and maintainer
• gptsci.com - Project sponsorship and development

🌟 Support the Open Source Community

If you find this library useful, consider contributing to open-source projects, or sharing your knowledge on the open social web. Together, we can build free tools and resources that empower everyone.

📜 License

Copyright © 2025 Alex Wong

MIT