Open Source · Apache-2.0 · TypeScript
Open-Source-PowerPoint-Viewer und WYSIWYG-Editor fur React, Vue 3, Angular, Svelte 5 und Vanilla JavaScript. Ein headless TypeScript-Kern ladt, bearbeitet und speichert .pptx-Dateien; die Komponenten rendern sie als natives HTML, CSS und SVG.
npm i pptx-react-viewerLive-Demo
Das ist der echte Editor, der in Ihrem Browser lauft: dieselbe deployte Demo-App wie von npm, live eingebettet. Wechseln Sie das Framework, oder teilen Sie die Ansicht und sehen Sie zu, wie zwei unabhangige Apps dasselbe Deck gemeinsam bearbeiten.
Funktionen
Uber 187 vordefinierte Formen, 23 Diagrammtypen, SmartArt, Animationen, Morph-Ubergange, eingebettete Schriften, EMF- und WMF-Metadateien und 3D-Modelle, alle als HTML, CSS und SVG gezeichnet. Text bleibt markierbar und Screenreader funktionieren weiter.
Rendering →Ein Menuband, Inspektor-Panels und direkte Manipulation auf der Leinwand fur Text, Formen, Tabellen, Diagramme und SmartArt, mit vollstandiger Undo-Historie. Auch Master- und Layout-Elemente sind bearbeitbar.
Bearbeitung →Das Laden erzeugt ein voll typisiertes Datenmodell mit sechzehn Elementtypen. Das Speichern schreibt gultiges OpenXML mit intakten Themes, Mastern, Layouts und OOXML-Strict-Konformitat, sodass sich ein bearbeitetes Deck sauber in PowerPoint offnet.
Laden und Speichern →Gemeinsames Bearbeiten uber ein Yjs-CRDT mit Prasenzanzeige, zeichengenauem Text-Merge und einem Peer-to-Peer-Transport, der keinen Server braucht.
Kollaboration →PNG, JPEG, SVG, PDF, GIF und Video direkt aus dem Browser. Der SVG-Export lauft auch headless in Node.js, ganz ohne DOM.
Export →Offnen und speichern Sie passwortgeschutzte Dateien mit agiler AES-128- und AES-256-Verschlusselung.
Verschlusselung →Erstellen Sie Decks programmatisch mit dem fluent Builder, oder konvertieren Sie sie in sauberes Markdown oder positioniertes HTML mit Medienextraktion und Vortragsnotizen.
Builder-API →Jedes UI-Label lauft uber einen von 1.600+ pptx.*-Ubersetzungsschlusseln, verbunden mit der i18n-Bibliothek, die Ihre App bereits nutzt: react-i18next, vue-i18n oder ngx-translate.
Lokalisierung →Automatisierung
pptx-viewer-mcp stellt uber das Model Context Protocol 73 PPTX-Werkzeuge mit Zod-Schemas bereit, sodass Claude, Cursor und Copilot Prasentationen direkt lesen, bearbeiten und konvertieren konnen. Dieselben Funktionen laufen headless in Node, Bun oder Serverless-Umgebungen, und eine CLI deckt einmalige Konvertierungen ab.
MCP und Werkzeuge →
{
"mcpServers": {
"pptx": {
"command": "npx",
"args": ["pptx-viewer-mcp"]
}
}
}import { PptxHandler } from 'pptx-viewer-core';
const handler = new PptxHandler();
const deck = await handler.load(pptxArrayBuffer);
// Every element is a typed, discriminated union
for (const el of deck.slides[0].elements) {
if (el.type === 'text') {
// Edit runs so bold, font, links, and paragraph breaks survive.
el.textSegments = el.textSegments?.map((run) => ({
...run,
text: run.isParagraphBreak ? run.text : rebrand(run.text),
}));
el.text = rebrand(el.text);
}
}
// Serialize straight back to a valid .pptx
const file = await handler.save(deck.slides);Schnellstart
Installieren Sie das Paket fur Ihr Framework, ubergeben Sie die rohen .pptx-Bytes und geben Sie dem Container eine Hohe. Bearbeitung, Prasentation, Kollaboration und Export sind nur eine Prop entfernt.
import { PowerPointViewer } from 'pptx-react-viewer';
import { useEffect, useState } from 'react';
import 'pptx-react-viewer/styles';
export function Deck() {
const [content, setContent] = useState<Uint8Array | null>(null);
useEffect(() => {
fetch('/deck.pptx')
.then((r) => r.arrayBuffer())
.then((buf) => setContent(new Uint8Array(buf)));
}, []);
if (!content) return <div>Loading...</div>;
return (
<div style={{ height: '100vh' }}>
<PowerPointViewer content={content} canEdit />
</div>
);
}FAQ
Ja. Alles steht unter Apache-2.0-Lizenz: der Kern, alle funf UI-Pakete, der MCP-Server und die Demos. Es gibt keine Bezahlstufe.
Ja. Das Speichern schreibt gultiges OpenXML mit erhaltenen Themes, Mastern, Layouts und OOXML-Strict-Konformitat, sodass sich ein hier geladenes, bearbeitetes und gespeichertes Deck sauber in PowerPoint offnet.
Nein. Parsen, Rendern, Bearbeiten und Speichern passieren im Browser. Der Kern lauft auch in Node.js und Bun fur serverseitige oder CLI-Arbeit.
Als natives HTML, CSS und SVG statt als Canvas-Bitmap. Text bleibt markierbar, der Zoom bleibt scharf und Screenreader funktionieren.
Der mitgelieferte Peer-to-Peer-Transport nutzt y-webrtc-Signalisierungsinfrastruktur. Fur Persistenz, Authentifizierung oder kontrollierte Netzwerke stellen Sie einen Kollaborationsdienst wie ein y-websocket-Relay bereit. Kollaboration →
Ja. Agile AES-128- und AES-256-Verschlusselung wird beim Offnen wie beim Speichern unterstutzt.
React 18/19, Vue 3, Angular, Svelte 5 und ein frameworkfreier Vanilla-Build. Sie teilen den Kern und frameworkneutrale Rendering-Logik, wahrend jedes Binding seine eigene View-Schicht bereitstellt.
OLE-Inhalte konnen ersetzt werden; unterstutzte eingebettete Tabellen, Dokumente und verschachtelte Deck-Titel lassen sich bearbeiten. Einige visuelle Effekte werden auf dem Bildschirm angenahert. Die Seite zu den Einschrankungen listet genau auf, was zu erwarten ist. Einschrankungen →
Loslegen
Fugen Sie Ihrer App PowerPoint-Unterstutzung mit einer einzigen Abhangigkeit hinzu. Apache-2.0-lizenziert, striktes TypeScript, keine nativen Abhangigkeiten. Testen Sie die Demo mit einem eigenen Deck und folgen Sie dann dem Schnellstart.