Live Demos

Pick a demo, load your deck,
start exploring.

From a minimal file-upload widget to a full Office-style viewer. Every demo uses the same core viewer—mix and match controls to fit your product.

Interactive Demo Product page
Before you dive in
  • Use Chrome, Firefox, or Safari for best Canvas performance
  • Charts require Chart.js (included in all demos)
  • Drag-and-drop or paste a URL in any viewer demo
  • Arrow keys navigate slides in all demos
  • Download the generated PPTX from the interactive demo
Featured

Choose a demo

Interactive Demo

New

Generate PPTX presentations in-browser with PptxGenJS, then instantly render them with PptxViewJS. Pick from Charts, Tables, Shapes, and more. Download the generated file at any time.

  • Bar, Line, Pie, Area, Doughnut charts
  • Sales reports & feature comparison tables
  • Shapes, text formatting & slide layouts
  • Download generated PPTX files
Open Interactive Demo
Simple Viewer
Starter

Drag-and-drop or pick a file. Minimal controls, clean layout. Perfect starting point for integration.
Full Featured UI
Product Ready

Thumbnails, zoom, fullscreen, keyboard shortcuts, URL loading. Office Online–style experience.
Knowledge Base Layout
Embedded

Split view with persistent thumbnail sidebar for documentation portals and LMS platforms.
Quick start

CDN starter snippet

Paste this into any HTML page to start rendering .pptx files immediately. No build step required.

Install via npm Download UMD build
CDN usage 
<!-- Chart.js (required for PPTX charts) -->
<script src="cdn.jsdelivr.net/npm/[email protected]/dist/chart.umd.min.js"></script>

<!-- JSZip (required) -->
<script src="cdn.jsdelivr.net/npm/[email protected]/dist/jszip.min.js"></script>

<!-- PptxViewJS -->
<script src="cdn.jsdelivr.net/npm/pptxviewjs/dist/PptxViewJS.min.js"></script>

<canvas id="slide" width="1280" height="720"></canvas>
<script>
  const canvas = document.getElementById('slide');
  const viewer = new PptxViewJS.PPTXViewer({ canvas, autoExposeGlobals: true });
  viewer.on('loadComplete', () => viewer.render(canvas));
  fileInput.addEventListener('change', e => viewer.loadFile(e.target.files[0]));
</script>
Integrations

Upgrade the experience

Framework components

Wrap the viewer in React, Vue, or Svelte components to handle route changes, authentication, or analytics.

Hook into events

Listen for slideChanged, loadComplete, and renderComplete to drive custom UI or logging.

Custom toolbar

Start from the full demo and swap icons, colors, or keyboard shortcuts to align with your brand.