Simple viewer
Upload a .pptx file and move through slides with clean, minimal controls.
Open simple.htmlEvery demo uses the same core viewer, so you can mix-and-match toolbars, thumbnails, and custom controls to fit your product. Bring your own .pptx file or load the bundled samples.
Each example showcases a different viewer configuration. Start with the simple upload flow, then explore the full-featured UI for toolbar controls, thumbnails, and fullscreen support.
Upload a .pptx file and move through slides with clean, minimal controls.
Open simple.htmlComplete viewer with zoom, keyboard shortcuts, slide count, and URL loading.
Open full.htmlSplit view with persistent thumbnails and responsive canvas for documentation portals.
Open embedded.htmlRender decks inside a Streamlit dashboard with bidirectional events.
View streamlit_app.pyGrab the essentials to embed PptxViewJS in a static HTML page.
<!-- Optional: Chart.js (required only for PPTX charts) -->
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<!-- Required: JSZip dependency -->
<script src="https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js"></script>
<!-- PptxViewJS UMD bundle exposes global `PptxViewJS` -->
<script src="https://cdn.jsdelivr.net/npm/pptxviewjs/dist/PptxViewJS.min.js"></script>
<div id="viewer" style="width:960px;height:540px;margin:auto"></div>
<script>
const viewer = new PptxViewJS.Viewer('#viewer');
viewer.load('https://example.com/decks/intro.pptx');
</script>Wrap the viewer in React, Vue, or Svelte components to handle route changes, authentication, or analytics.
Listen for slidechange, loadstart, and error events to drive custom UI or logging.
Start from the full demo and swap icons, colors, or keyboard shortcuts to align with your brand.