Open source · Apache-2.0 · TypeScript
Visionneuse et editeur WYSIWYG PowerPoint open source pour React, Vue 3, Angular, Svelte 5 et JavaScript vanilla. Un coeur TypeScript headless charge, modifie et enregistre les fichiers .pptx ; les composants les affichent en HTML, CSS et SVG natifs.
npm i pptx-react-viewerDemo en direct
C'est le vrai editeur qui tourne dans votre navigateur : la meme application demo deployee que celle de npm, integree en direct. Changez de framework, ou scindez la vue et regardez deux applications independantes co-editer un meme deck.
Fonctionnalites
Plus de 187 formes predefinies, 23 types de graphiques, SmartArt, animations, transitions morph, polices embarquees, metafichiers EMF et WMF et modeles 3D, tous dessines en HTML, CSS et SVG. Le texte reste selectionnable et les lecteurs d'ecran continuent de fonctionner.
Rendu →Un ruban, des panneaux inspecteurs et la manipulation directe sur le canevas pour le texte, les formes, les tableaux, les graphiques et les SmartArt, avec un historique d'annulation complet. Les elements des masques et des dispositions sont eux aussi editables.
Edition →Le chargement produit un modele de donnees entierement type avec seize types d'elements. L'enregistrement ecrit un OpenXML valide en preservant themes, masques, dispositions et conformite OOXML Strict : un deck modifie se rouvre proprement dans PowerPoint.
Chargement et enregistrement →Co-editez via un CRDT Yjs avec suivi de presence, fusion du texte au caractere pres et un transport pair-a-pair qui ne demande aucun serveur.
Collaboration →PNG, JPEG, SVG, PDF, GIF et video directement depuis le navigateur. L'export SVG fonctionne aussi en headless dans Node.js, sans DOM.
Export →Ouvrez et enregistrez des fichiers proteges par mot de passe avec le chiffrement agile AES-128 et AES-256.
Chiffrement →Creez des decks par programmation avec le builder fluide, ou convertissez-les en Markdown propre ou en HTML positionne avec extraction des medias et notes du presentateur.
API Builder →Chaque libelle de l'interface passe par l'une des 1 600+ cles de traduction pptx.*, reliees a la bibliotheque i18n que votre application utilise deja : react-i18next, vue-i18n ou ngx-translate.
Localisation →Automatisation
pptx-viewer-mcp expose plus de 50 outils PPTX avec des schemas Zod via le Model Context Protocol : Claude, Cursor et Copilot peuvent lire, modifier et convertir des presentations directement. Les memes fonctions tournent en headless dans Node, Bun ou en serverless, et une CLI couvre les conversions ponctuelles.
MCP et outils →
{
"mcpServers": {
"pptx": {
"command": "npx",
"args": ["pptx-viewer-mcp"]
}
}
}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);Demarrage rapide
Installez le package de votre framework, passez les octets .pptx bruts et donnez une hauteur au conteneur. Edition, presentation, collaboration et export sont a une prop pres.
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
Oui. Tout est sous licence Apache-2.0 : le coeur, les cinq packages UI, le serveur MCP et les demos. Il n'y a pas d'offre payante.
Oui. L'enregistrement ecrit un OpenXML valide en preservant themes, masques, dispositions et conformite OOXML Strict : un deck charge, modifie et enregistre ici se rouvre proprement dans PowerPoint.
Non. L'analyse, le rendu, l'edition et l'enregistrement se font dans le navigateur. Le coeur tourne aussi dans Node.js et Bun pour le travail cote serveur ou en CLI.
En HTML, CSS et SVG natifs plutot qu'en bitmap canvas. Le texte reste selectionnable, le zoom reste net et les lecteurs d'ecran fonctionnent.
Pas par defaut. Le transport fourni est pair-a-pair (y-webrtc) et fonctionne depuis un hebergement statique. Pour la persistance et l'authentification, vous pouvez le pointer vers un relais y-websocket. Collaboration →
Oui. Le chiffrement agile AES-128 et AES-256 est pris en charge a l'ouverture comme a l'enregistrement.
React 19, Vue 3, Angular, Svelte 5 et une version vanilla sans framework. Chaque package embarque le meme moteur, le rendu est donc identique partout.
Les objets OLE sont en lecture seule et quelques effets visuels sont approximes a l'ecran. La page des limitations detaille exactement quoi attendre. Limitations →
Commencer
Ajoutez la prise en charge de PowerPoint a votre application avec une seule dependance. Licence Apache-2.0, TypeScript strict, aucune dependance native. Essayez la demo avec un de vos decks, puis suivez le demarrage rapide.