A JavaScript library for viewing PowerPoint presentations in web browsers using Canvas rendering
npm install pptxviewjsPptxViewJS 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
- 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
- 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
- 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
- Load from File objects, ArrayBuffer, or Uint8Array
- Fetch presentations from URLs with automatic error handling
- Supports local files and remote presentations
- Canvas-based rendering for optimal performance and quality
- Modular design with clean separation of concerns
- Memory efficient with proper cleanup and resource management
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.
Choose your preferred method to install PptxViewJS:
``bash`
npm install pptxviewjs
`bash`
yarn add pptxviewjs
Use the UMD build via jsDelivr. Include JSZip (required) before the library. Include Chart.js (optional) if you need chart rendering:
`html
`
> Note: JSZip is required for PPTX (ZIP) parsing. Chart.js is optional and only needed when rendering charts.
Install JSZip (required). Install Chart.js if your presentations include charts:
`bash`
npm install jszipOptional (for charts)
npm install chart.js
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.
- 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.
- CommonJS: dist/PptxViewJS.cjs.js
- ES Module: dist/PptxViewJS.es.js
- Minified UMD: dist/PptxViewJS.min.js
PptxViewJS presentations are viewed via JavaScript by following 3 basic steps:
#### React/TypeScript
`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
`html
`
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!
Navigate through presentations with simple, chainable methods:
`javascript
// 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();
`
Listen to presentation events for custom interactions:
`javascriptLoaded ${data.slideCount} slides
// Listen to events
viewer.on('loadStart', () => console.log('Loading started...'));
viewer.on('loadComplete', (data) => console.log());Rendered slide ${slideIndex}
viewer.on('renderComplete', (slideIndex) => console.log());Now viewing slide ${slideIndex}
viewer.on('slideChanged', (slideIndex) => console.log());``
Thank you to everyone for the contributions and suggestions! ❤️
Special Thanks:
- Alex Wong - Original author and maintainer
- gptsci.com - Project sponsorship and development
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.
Copyright © 2025 Alex Wong