Open Source · Apache-2.0 · TypeScript

Die PowerPoint-Engine
fur das Web.

Laden, rendern, bearbeiten und speichern Sie .pptx-Dateien im Browser oder in Node.js. Erhaltlich als headless TypeScript-Kern und als fertige Komponenten fur React, Vue 3, Angular, Svelte 5 und Vanilla JavaScript.

Loslegen Live-Demo offnen

npx @christophervr/pptx-viewer

sample-deck.pptx · live im BrowserAusprobieren →

Rendering

Folien werden als HTML, CSS und SVG gerendert.Text bleibt markierbar, der Zoom bleibt scharf,und gespeicherte Dateien offnen sich sauber in PowerPoint.

Rendering

Deckt die gesamte OpenXML-Funktionsflache ab.

Uber 187 vordefinierte Formen, 23 Diagrammtypen, SmartArt, Animationen, Morph-Ubergange, EMF- und WMF-Metadateien, eingebettete Schriften und 3D-Modelle werden mit HTML, CSS und SVG gezeichnet. Keine Canvas-Rasterung: Text bleibt markierbar und Screenreader funktionieren weiter.

So funktioniert das Rendering →

christophervr.github.io/pptx-viewer/demo

The pptx-viewer editor: ribbon toolbar, slide thumbnails, and a slide rendered on the canvas

Datenmodell

Laden, andern, zuruckspeichern.

Das Laden einer .pptx-Datei erzeugt ein vollstandig typisiertes PptxData-Modell mit sechzehn Elementtypen. Themes, Master, Layouts und OOXML-Strict-Konformitat uberstehen den Roundtrip: Ein bearbeitetes Deck offnet sich sauber in PowerPoint.

Laden und Parsen →

round-trip.tsNode · Bun · Deno · browser

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

const handler = new PptxHandler();
const deck = await handler.load(bytes);

// Every element is a typed, discriminated union
for (const el of deck.slides[0].elements) {
  if (el.type === 'text') el.text = rebrand(el.text);
}

// Serialize straight back to a valid .pptx
const file = await handler.save(deck.slides);

Frameworks

Eine Engine. Jedes Framework, oder keines.

Der Viewer steht als fertige Komponente fur React, Vue 3, Angular und Svelte 5 bereit, dazu eine frameworkfreie Vanilla-JavaScript-Variante. Jedes Paket bundelt die Engine: Eine einzige Abhangigkeit liefert uberall dasselbe Rendering, inklusive Prasentationsmodus, Bearbeitung und Export.

Framework wahlen →

Reactpptx-react-viewer

<PowerPointViewer />

Vue 3pptx-vue-viewer

<PowerPointViewer />

Angularpptx-angular-viewer

<pptx-viewer />

Automatisierung

Headless, per CLI oder uber MCP.

pptx-viewer-mcp stellt uber 50 PPTX-Tools mit Zod-Schemata als MCP-Server bereit: Claude, Cursor und Copilot konnen Prasentationen direkt lesen, bearbeiten und konvertieren. Dieselben Funktionen lassen sich aus eigenem Code in Node, Bun oder Serverless-Umgebungen aufrufen.

MCP und Tools →

claude_desktop_config.json

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

replaceTextaddSlideconvertToMarkdownextractMediaapplyTheme+ 45 more

Ausserdem enthalten

Echtzeit-Kollaboration

Gemeinsames Bearbeiten uber ein Yjs-CRDT mit Prasenzanzeige, zeichengenauem Text-Merge und einem serverlosen P2P-Transport.

Verschlusselung

Offnen und speichern Sie passwortgeschutzte Dateien mit agiler AES-128- und AES-256-Verschlusselung.

Export

PNG, JPEG, SVG, PDF, GIF und Video direkt aus dem Browser. SVG-Export lauft auch headless in Node.js ohne DOM.

Markdown-Konvertierung

Wandeln Sie Decks in sauberes Markdown oder positioniertes HTML um, mit Medienextraktion, Notizen und Metadaten.

Builder-API

Erstellen Sie Prasentationen programmatisch: Text, Formen, Bilder, Tabellen und Diagramme ohne rohes OpenXML.

Grenzen

OLE-Objekte sind schreibgeschutzt und manche visuellen Effekte werden am Bildschirm angenahert. Die Seite zu den Grenzen listet genau auf, was zu erwarten ist.

Lokalisierung

Jedes UI-Label lauft uber einen pptx.*-Ubersetzungsschlussel (uber 1.600), angebunden an die i18n-Bibliothek Ihrer App: react-i18next, vue-i18n oder ngx-translate. Ein englisches Worterbuch liegt jedem Paket bei, und diese Dokumentation gibt es auf Englisch, Franzosisch, Spanisch und Deutsch.

Stack wahlen