PowerPoint presentations, rendered in the browser.
PptxViewJS is a client-side JavaScript library that parses .pptx files and renders slides using HTML5 Canvas — no server, no file uploads, no conversion services required.
👉 Product page · Interactive Demo · All demos
The interactive demo showcases the full client-side presentation round-trip:
- Generate — pick a template (charts, tables, shapes, text, full deck) and click Run. PptxGenJS builds the
.pptxfile entirely in the browser. - Render — PptxViewJS instantly renders the generated presentation on an HTML5 Canvas.
- Download — save the
.pptxfile at any time.
The live code panel shows the exact PptxGenJS source used to generate each slide. No server involved at any step.
Available templates: Bar/Line/Pie/Area charts · Sales & comparison tables · Shapes · Text formatting · Full multi-slide deck (~18 slides)
| Demo | Description |
|---|---|
| 🎮 Interactive Demo | Generate with PptxGenJS → render with PptxViewJS, live in the browser |
| 📄 Simple Viewer | Minimal drag-and-drop viewer — perfect starting point |
| 🖥️ Full Featured UI | Office Online–style: thumbnails, zoom, fullscreen, keyboard shortcuts |
| 📚 Embedded Layout | Split view with thumbnail sidebar for docs portals and LMS platforms |
- ✅ Zero server dependencies — all processing runs client-side
- ✅ Canvas rendering — pixel-accurate slide display
- ✅ Charts — bar, line, pie, area, doughnut via Chart.js (optional peer dep)
- ✅ Tables — merged cells, borders, shading, complex headers
- ✅ Media & SVG — embedded images and vector graphics
- ✅ Framework ready — React, Vue, Svelte, Vite, Electron, Streamlit
- ✅ TypeScript — full type definitions included
- ✅ Multiple formats — ESM, CJS, and minified UMD builds
Choose your preferred method to install PptxViewJS:
npm install pptxviewjsyarn add pptxviewjsUse 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/jszip@3.10.1/dist/jszip.min.js"></script>
<!-- Optional: Chart.js (only if your presentations contain charts) -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/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.
Install JSZip (required). Install Chart.js if your presentations include charts:
npm install jszip
# Optional (for charts)
npm install chart.jsPptxViewJS 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:
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();<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!
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();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}`));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