PptxViewJS parses .pptx files on the client, renders slides with HTML5 Canvas, and gives you a composable viewer API — no server, no upload, no conversion.
<!-- 1. Add dependencies -->
<script src="cdn.jsdelivr.net/npm/[email protected]/dist/jszip.min.js"></script>
<script src="cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>
<script src="cdn.jsdelivr.net/npm/pptxviewjs/dist/PptxViewJS.min.js"></script>
<!-- 2. Add a canvas -->
<canvas id="myCanvas" width="1280" height="720"></canvas>
<!-- 3. Initialize -->
<script>
const canvas = document.getElementById('myCanvas');
const viewer = new PptxViewJS.PPTXViewer({ canvas });
fileInput.addEventListener('change', async e => {
await viewer.loadFile(e.target.files[0]);
await viewer.render(canvas);
});
</script>npm install pptxviewjs
Drop one script tag and you're rendering slides. Extend with your own toolbar, analytics, or access rules.
One script tag or npm install. Render your first slide in under 10 lines of code.
Canvas rendering preserves fonts, colors, charts, and complex layouts from the original PPTX.
Bar, line, pie, doughnut, radar, bubble charts via Chart.js — auto-rendered from PPTX data.
Use the included toolbar or build your own. Hook into events for slide changes, errors, and analytics.
All processing happens client-side. No file uploads or cloud conversion services needed.
Merged cells, custom borders, shading, and multi-level headers rendered from OOXML.
Modern Chromium, Firefox, Safari. Integrates with React, Vue, Svelte, and Streamlit.
Embedded images, SVG graphics, and shape fills rendered with full fidelity.
Load JSZip and the PptxViewJS bundle. Add Chart.js if your slides have charts.
Create a <canvas>, then call viewer.loadFile() with a File, ArrayBuffer, or URL.
Hook into loadComplete, slideChanged, and renderComplete events. Configure thumbnails and zoom.
// Install
npm install pptxviewjs jszip chart.js
// Import
import { PPTXViewer } from 'pptxviewjs';
const viewer = new PPTXViewer({
canvas: document.getElementById('slide'),
autoExposeGlobals: true,
});
viewer.on('loadComplete', ({ slideCount }) => {
viewer.render(canvas);
});
viewer.on('slideChanged', (index) => {
counter.textContent = index + 1;
});
// Load from File or ArrayBuffer
await viewer.loadFile(file);
await viewer.loadFromUrl('/deck.pptx');
// Navigate
await viewer.nextSlide(canvas);
await viewer.previousSlide(canvas);
await viewer.renderSlide(5, canvas);Open source, MIT licensed, and free forever. Get started in minutes.