pptx-viewerPowerPoint SDK for TypeScript

See it in action ​

The viewer/editor rendered entirely with HTML, CSS, and SVG - sharp text at any zoom, native accessibility, no Canvas. Vue and Angular bindings use the same engine. Try the live demo.

Choose your stack ​

The UI packages bundle the core engine, so you install exactly one package:

Full installation details and peer dependency requirements are in the installation guide.

Programmatic use ​

All three UI packages bundle pptx-viewer-core, but you can also use the core engine on its own for headless workflows - no browser, no framework:

import { PptxHandler, PptxMarkdownConverter } from 'pptx-viewer-core';

const handler = new PptxHandler();
const data = await handler.load(await fs.readFile('deck.pptx'));

// Walk the slide data model
for (const slide of data.slides) {
	for (const el of slide.elements) {
		if (el.type === 'text') console.log(el.text);
	}
}

// Mutate and save back to .pptx
data.slides[0].elements[0].text = 'Updated';
await fs.writeFile('out.pptx', await handler.save(data.slides));

// Or convert to Markdown
const md = await new PptxMarkdownConverter('./out', { semanticMode: true }).convert(data);

The core engine runs identically in Node.js, Bun, Deno, browser tabs, Web Workers, and serverless functions.

MCP and AI agents ​

pptx-viewer-mcp exposes 24 PPTX manipulation tools as an MCP server. Any MCP-compatible client (Claude Desktop, Cursor, VS Code Copilot) can use them to read, edit, and convert presentations without writing code:

{
	"mcpServers": {
		"pptx": { "command": "npx", "args": ["pptx-viewer-mcp"] }
	}
}

Alternatively, call the tool functions directly in your own pipeline - they are pure functions that take PptxData and return PptxData:

import { replaceText, addSlide, convertToMarkdown } from 'pptx-viewer-mcp';

See the MCP & Tools reference for the full tool catalogue, Zod schemas, and the Y.Doc collaboration codec.

Limitations ​

Before adopting the library, read the full limitations page. Key caveats:

• OLE objects are read-only - embedded Excel/Word content can be displayed but not edited
• SmartArt is static - shapes are fully editable but there is no live reflow engine
• CSS rendering approximates some effects - backdrop-filter, mix-blend-mode, and CSS 3D transforms are not pixel-perfect
• Vue / Angular are viewer-first - full editing, presenter mode, and export are React-only for now; they are being ported
• EMF/WMF on Canvas only - the EMF converter requires HTMLCanvasElement or OffscreenCanvas; pure Node.js needs a canvas polyfill

Extending the viewer ​

The React viewer is built on 67+ composable hooks. You can hook into any layer:

• Custom element renderers - override the default renderer for any PptxElement type by mapping the type discriminant to your own component
• Theming - override CSS custom properties or pass a theme prop to restyle the toolbar, inspector, and slides (Theming guide)
• Imperative handle - use ref to call exportAsPng, goToSlide, setZoom, and other methods programmatically (Imperative handle reference)
• Custom hooks - import and compose the individual hooks (useEditorOperations, useExportHandlers, etc.) to build your own viewer shell (Hooks reference)
• New element types - the core engine's mixin architecture makes adding a new PptxElement type a seven-step process (Adding an element type)