Skip to content

README.md

Latest commit

 

History

History
202 lines (136 loc) · 7.11 KB

README.md

File metadata and controls

202 lines (136 loc) · 7.11 KB

PptxViewJS

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

🎮 Interactive Demo — PptxGenJS + PptxViewJS

Try it live →

The interactive demo showcases the full client-side presentation round-trip:

  1. Generate — pick a template (charts, tables, shapes, text, full deck) and click Run. PptxGenJS builds the .pptx file entirely in the browser.
  2. Render — PptxViewJS instantly renders the generated presentation on an HTML5 Canvas.
  3. Download — save the .pptx file 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)

🌐 All Demos

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

🚀 Features

  • ✅ 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

📦 Installation

Choose your preferred method to install PptxViewJS:

Quick Install (Node-based)

npm install pptxviewjs
yarn add pptxviewjs

CDN (Browser Usage)

Use 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.

Peer Dependencies (Node/bundlers)

Install JSZip (required). Install Chart.js if your presentations include charts:

npm install jszip
# Optional (for charts)
npm install chart.js

🚀 Universal Compatibility

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.

Supported Platforms

  • 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.

Builds Provided

📖 Documentation

Quick Start Guide

PptxViewJS presentations are viewed via JavaScript by following 3 basic steps:

React/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

<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!

🎮 Navigation & Interaction

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();

📊 Event System

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}`));

🙏 Contributors

Thank you to everyone for the contributions and suggestions! ❤️

Special Thanks:

🌟 Support the Open Source Community

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.

📜 License

Copyright © 2025 Alex Wong

MIT