Installation

The pptx-viewer packages are published independently on npm. Install only what you need: the framework-agnostic core engine or one of the framework viewer packages.

Node version

Node.js 18 or newer is required for TypeScript compilation and for running the packages outside the browser.

Choose your framework

Framework	Package	Notes
React	pptx-react-viewer	Viewer, editor, presenter, export, collaboration
Vue 3	pptx-vue-viewer	Same engine and feature set as the React binding
Angular	pptx-angular-viewer	Same engine and feature set as the React binding
Svelte 5	pptx-svelte-viewer	Same engine and feature set as the React binding
No framework	pptx-vanilla-viewer	Same engine, plain DOM: no framework dependency at all
Headless (Node / browser)	pptx-viewer-core	No UI, no framework dependency
AI / MCP tooling	pptx-viewer-mcp	52 MCP tools + CLI + Y.Doc codec

Installing from npm

React viewer

The React viewer/editor component, published as pptx-react-viewer. The core engine is bundled in, so you don't install it separately.

npm

npm install pptx-react-viewer react react-dom

pnpm

pnpm add pptx-react-viewer react react-dom

yarn

yarn add pptx-react-viewer react react-dom

bun

bun add pptx-react-viewer react react-dom

Other peer dependencies

The viewer also expects framer-motion, lucide-react, react-icons, jspdf, jszip, fast-xml-parser, and i18next/react-i18next - install the ones your usage needs.

Vue 3 viewer

The Vue 3 viewer component, published as pptx-vue-viewer. The core engine is bundled in.

npm

npm install pptx-vue-viewer vue

pnpm

pnpm add pptx-vue-viewer vue

yarn

yarn add pptx-vue-viewer vue

bun

bun add pptx-vue-viewer vue

<script setup lang="ts">
import { ref } from 'vue';
import { PowerPointViewer } from 'pptx-vue-viewer';

const content = ref<ArrayBuffer | null>(null);
</script>

<template>
	<PowerPointViewer :content="content" />
</template>

Angular viewer

The Angular viewer component, published as pptx-angular-viewer. The core engine is bundled in.

npm

npm install pptx-angular-viewer @angular/core @angular/common

pnpm

pnpm add pptx-angular-viewer @angular/core @angular/common

yarn

yarn add pptx-angular-viewer @angular/core @angular/common

bun

bun add pptx-angular-viewer @angular/core @angular/common

// app.module.ts
import { PptxAngularViewerModule } from 'pptx-angular-viewer';

@NgModule({
	imports: [PptxAngularViewerModule],
})
export class AppModule {}

<!-- app.component.html -->
<pptx-viewer [content]="content"></pptx-viewer>

Svelte 5 viewer

The Svelte 5 viewer component, published as pptx-svelte-viewer. The core engine is bundled in - see the Svelte docs for the full component reference.

npm

npm install pptx-svelte-viewer svelte

pnpm

pnpm add pptx-svelte-viewer svelte

yarn

yarn add pptx-svelte-viewer svelte

bun

bun add pptx-svelte-viewer svelte

<script lang="ts">
	import { PowerPointViewer } from 'pptx-svelte-viewer';

	let bytes = $state<Uint8Array | null>(null);
</script>

{#if bytes}
	<PowerPointViewer source={bytes} />
{/if}

Vanilla JS viewer (no framework)

The zero-framework viewer, published as pptx-vanilla-viewer. The core engine is bundled in; there are no framework peer dependencies. Viewing, presenting, and editing (behind the editable option) all work from a single factory function - see the Vanilla JS docs for the full API reference.

npm

npm install pptx-vanilla-viewer

pnpm

pnpm add pptx-vanilla-viewer

yarn

yarn add pptx-vanilla-viewer

bun

bun add pptx-vanilla-viewer

import { createPptxViewer } from 'pptx-vanilla-viewer';

const viewer = createPptxViewer(document.getElementById('host')!, {
	source: '/decks/quarterly.pptx',
	editable: true,
});

Core engine

The framework-agnostic engine for parsing, editing, serializing, and converting PPTX files. Use this when you need headless automation, build scripts, or Node.js pipelines with no UI dependency. The UI packages above bundle the core engine, so you don't need to install it separately if you're already using one of them.

npm

npm install pptx-viewer-core

pnpm

pnpm add pptx-viewer-core

yarn

yarn add pptx-viewer-core

bun

bun add pptx-viewer-core

MCP server and tools

25 PPTX manipulation tool functions, an MCP server for AI agents, and the Y.Doc collaboration codec - all built on the core engine.

npm

npm install pptx-viewer-mcp

pnpm

pnpm add pptx-viewer-mcp

yarn

yarn add pptx-viewer-mcp

bun

bun add pptx-viewer-mcp

Optional peer dependencies

Some features in the React package activate only when their optional peers are present.

Feature	Optional peers	Notes
3D models (GLB/GLTF)	three	Without them, 3D elements fall back to their poster image.
Real-time collaboration	yjs, y-websocket	Yjs CRDT with presence tracking.

npm

npm install three yjs y-websocket

pnpm

pnpm add three yjs y-websocket

yarn

yarn add three yjs y-websocket

bun

bun add three yjs y-websocket

Local development (cloning the monorepo)

The monorepo uses Bun as its package manager and workspace runner. Packages reference each other through the workspace:* protocol.

# Clone the repository
git clone https://github.com/ChristopherVR/pptx-viewer
cd pptx-viewer

# Install all workspace dependencies
bun install

# Build all packages
bun run build

# Run tests / type-check
bun run test
bun run typecheck

Build order matters

Packages must be built in dependency order:

core -> shared -> react / vue / angular / vanilla / svelte

bun run build from the repo root handles this for you. When building a single package manually (cd packages/<pkg> && bun run build), make sure its dependencies are built first.

Common workspace commands

bun run build         # Build all packages in dependency order
bun run test          # Run vitest across all packages
bun run typecheck     # Type-check all packages
bun run fmt           # Format with oxfmt
bun run lint          # Lint with oxlint
bun run demo          # Start the React demo dev server (port 4173)
bun run demo:vue      # Start the Vue demo dev server (port 4175)
bun run demo:angular  # Start the Angular demo dev server (port 4174)
bun run demo:vanilla  # Start the Vanilla JS demo dev server (port 4176)
bun run demo:svelte   # Start the Svelte demo dev server (port 4177)

Next steps

• Quick Start - create, parse, convert, and render presentations.
• Architecture - how the layers fit together.
• Limitations - important caveats before going to production.