@abstractclass/pptx-renderer

Proprietary PPTX renderer for React with canvas-based slide rendering and filmstrip navigation

Copyright © 2025 AbstractClass, Inc. All rights reserved.

PROPRIETARY AND CONFIDENTIAL - This software is licensed under a proprietary license. See LICENSE for details.

Overview

A high-performance, browser-based PowerPoint (PPTX) renderer built with React and HTML5 Canvas. Renders slides client-side without requiring server-side processing or LibreOffice conversion.

Key Features

• ✅ Client-Side Rendering: No server processing required
• ✅ Fast Performance: Instant rendering, <50ms per slide
• ✅ Filmstrip Navigation: Built-in thumbnail TOC with customizable position
• ✅ Theme Support: Full theme color and font parsing
• ✅ Rich Formatting: Text, images, shapes, colors, alignment
• ✅ TypeScript: Fully typed API
• ✅ Responsive: Dynamic canvas sizing with high-DPI support

Installation

npm install @abstractclass/pptx-renderer

Or with yarn:

yarn add @abstractclass/pptx-renderer

Quick Start

Basic Usage

import { PptxRenderer } from '@abstractclass/pptx-renderer';

function MyApp() {
  return (
    <PptxRenderer
      pptxSource="/path/to/presentation.pptx"
      initialSlide={0}
      width={960}
      height={540}
      showFilmstrip={true}
      filmstripPosition="right"
      onSlideChange={(slideNumber) => {
        console.log('Slide changed to:', slideNumber);
      }}
    />
  );
}

With File Upload

import { PptxRenderer } from '@abstractclass/pptx-renderer';
import { useState } from 'react';

function SlideUploader() {
  const [file, setFile] = useState<File | null>(null);

  return (
    <div>
      <input
        type="file"
        accept=".pptx"
        onChange={(e) => setFile(e.target.files?.[0] || null)}
      />

      {file && (
        <PptxRenderer
          pptxSource={file}
          width={1280}
          height={720}
          showFilmstrip={true}
          filmstripPosition="right"
        />
      )}
    </div>
  );
}

Advanced Usage - Direct Slide Rendering

import { parsePPTX, SlideRenderer } from '@abstractclass/pptx-renderer';

async function renderSlideManually() {
  // Parse PPTX file
  const response = await fetch('/path/to/presentation.pptx');
  const arrayBuffer = await response.arrayBuffer();
  const pptxData = await parsePPTX(arrayBuffer);

  // Get canvas element
  const canvas = document.getElementById('myCanvas') as HTMLCanvasElement;

  // Create renderer with high-DPI support
  const renderer = new SlideRenderer(canvas, {
    width: 960,
    height: 540,
    scale: window.devicePixelRatio,
  });

  // Render first slide
  await renderer.renderSlide(pptxData.slides[0]);
}

API Reference

<PptxRenderer>

Main component for rendering PPTX files with filmstrip navigation.

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | pptxSource | File \| string \| ArrayBuffer | - | PPTX file source | | initialSlide | number | 0 | Initial slide to display (0-indexed) | | width | number | 960 | Canvas width in pixels | | height | number | 540 | Canvas height in pixels | | showFilmstrip | boolean | true | Show filmstrip navigation | | filmstripPosition | 'left' \| 'right' \| 'bottom' | 'right' | Position of filmstrip | | onSlideChange | (slideNumber: number) => void | - | Callback when slide changes | | onError | (error: Error) => void | - | Callback for errors | | slides | SlideData[] | - | Optional pre-parsed slides | | deckData | DeckData | - | Optional deck data with theme | | allowReorder | boolean | false | Enable slide reordering | | allowDelete | boolean | false | Enable slide deletion | | showControls | boolean | false | Show slide controls |

parsePPTX(arrayBuffer: ArrayBuffer): Promise<PPTXData>

Parse a PPTX file from an ArrayBuffer.

Returns: Promise resolving to parsed PPTX data including slides, theme, and metadata.

SlideRenderer

Low-level canvas renderer for individual slides.

const renderer = new SlideRenderer(canvas, {
  width: 960,
  height: 540,
  scale: 2, // For retina displays
});

await renderer.renderSlide(slideData);

parseTheme(themeXml: string): PPTXTheme

Parse theme XML to extract colors and fonts.

parseSlideXml(slideXml: string, theme: PPTXTheme): ParsedSlide

Parse slide XML to extract shapes, text, and formatting.

Supported Features

Currently Supported

• ✅ Text boxes with formatting (font, size, color, bold, italic)
• ✅ Text alignment (left, center, right)
• ✅ Theme colors and fonts
• ✅ Images (PNG, JPEG, embedded)
• ✅ Rectangles and shapes with fill/stroke
• ✅ Solid color backgrounds
• ✅ Bullets and paragraphs
• ✅ Master slides and layouts
• ✅ Placeholder inheritance

Not Yet Supported

• ❌ Charts/Graphs
• ❌ Tables
• ❌ SmartArt
• ❌ Complex gradients
• ❌ Animations
• ❌ Transitions
• ❌ Videos
• ❌ Custom fonts (uses fallback fonts)

Architecture

PPTX File
    ↓
pptxtojson (XML parser)
    ↓
Theme & Slide XML
    ↓
pptx-xml-parser (our parser)
    ↓
Slide Data (structured JSON)
    ↓
SlideRenderer (canvas drawing)
    ↓
HTML5 Canvas

Performance

• Parsing: ~100-500ms for typical PPTX files
• Rendering: <50ms per slide
• Memory: ~5-10MB per presentation
• Scales: Tested with presentations up to 100 slides

Much faster than server-side approaches (LibreOffice, etc.) with no file I/O overhead.

Browser Support

• Chrome 90+
• Firefox 88+
• Safari 14+
• Edge 90+

Requires HTML5 Canvas support with high-DPI rendering.

TypeScript

Fully typed with TypeScript. All components and functions include comprehensive type definitions.

import type {
  PptxRendererProps,
  SlideData,
  DeckData,
  PPTXTheme,
} from '@abstractclass/pptx-renderer';

Examples

See the examples/ directory for complete working examples:

• examples/basic/ - Basic usage with URL source
• examples/with-filmstrip/ - Filmstrip navigation
• examples/advanced/ - Advanced rendering with custom controls

License

PROPRIETARY AND CONFIDENTIAL

Copyright © 2025 AbstractClass, Inc. All rights reserved.

This software and associated documentation files are proprietary to AbstractClass, Inc. Unauthorized copying, distribution, or use is strictly prohibited.

See LICENSE file for complete terms.

For licensing inquiries, contact: [email protected]

Support

For support and inquiries:

• Email: [email protected]
• Issues: (Internal use only - private repository)

Changelog

See CHANGELOG.md for version history and release notes.

Built with ❤️ by AbstractClass, Inc.