@kandiforge/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.

$3

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

``bash
npm install @kandiforge/pptx-renderer
`

Or with yarn:

`bash
yarn add @kandiforge/pptx-renderer
`

Quick Start

$3

`tsx
import { PptxRenderer } from '@kandiforge/pptx-renderer';

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

$3

`tsx
import { PptxRenderer } from '@kandiforge/pptx-renderer';
import { useState } from 'react';

function SlideUploader() {
const [file, setFile] = useState(null);

return (



);
}
`

$3

`tsx
import { parsePPTX, SlideRenderer } from '@kandiforge/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

$3

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 |

$3

Parse a PPTX file from an ArrayBuffer.

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

$3

Low-level canvas renderer for individual slides.

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

await renderer.renderSlide(slideData);
`

$3

Parse theme XML to extract colors and fonts.

$3

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

Supported Features

$3

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

$3

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

$3

By default, the renderer only logs warnings and errors to minimize console overhead. To enable debug logging for troubleshooting:

`tsx
// In browser console or your app initialization
window.PPTX_LOG_LEVEL = 'debug'; // Show all logs
window.PPTX_LOG_LEVEL = 'info'; // Show info, warnings, and errors
window.PPTX_LOG_LEVEL = 'warn'; // Default: only warnings and errors
window.PPTX_LOG_LEVEL = 'error'; // Only errors
window.PPTX_LOG_LEVEL = 'silent'; // No logs
`

Important: Debug and info logging can significantly impact performance when rendering many slides. Use 'warn' or 'silent' in production.

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.

`tsx
import type {
PptxRendererProps,
SlideData,
DeckData,
PPTXTheme,
} from '@kandiforge/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: licensing@abstractclass.net

Support

For support and inquiries:

- Email: support@abstractclass.net
- Issues: (Internal use only - private repository)

Changelog

See CHANGELOG.md for version history and release notes.

---

Built with ❤️ by AbstractClass, Inc.