Open source · Apache-2.0 · TypeScript
Visor y editor WYSIWYG de PowerPoint de codigo abierto para React, Vue 3, Angular, Svelte 5 y JavaScript vanilla. Un nucleo TypeScript headless carga, edita y guarda archivos .pptx; los componentes los muestran como HTML, CSS y SVG nativos.
npm i pptx-react-viewerDemo en vivo
Este es el editor real ejecutandose en tu navegador: la misma aplicacion demo desplegada que obtendrias de npm, incrustada en vivo. Cambia de framework, o divide la vista y mira como dos aplicaciones independientes coeditan un mismo deck.
Funciones
Mas de 187 formas predefinidas, 23 tipos de graficos, SmartArt, animaciones, transiciones morph, fuentes incrustadas, metarchivos EMF y WMF y modelos 3D, todos dibujados como HTML, CSS y SVG. El texto sigue siendo seleccionable y los lectores de pantalla siguen funcionando.
Renderizado →Una cinta, paneles inspectores y manipulacion directa en el lienzo para texto, formas, tablas, graficos y SmartArt, con historial de deshacer completo. Los elementos de patrones y disenos tambien son editables.
Edicion →La carga produce un modelo de datos completamente tipado con dieciseis tipos de elementos. El guardado escribe OpenXML valido conservando temas, patrones, disenos y la conformidad OOXML Strict, asi que un deck editado se reabre limpio en PowerPoint.
Carga y guardado →Coedita a traves de un CRDT de Yjs con presencia, fusion de texto a nivel de caracter y un transporte entre pares que no necesita servidor.
Colaboracion →PNG, JPEG, SVG, PDF, GIF y video directamente desde el navegador. La exportacion SVG tambien funciona en headless en Node.js, sin DOM.
Exportacion →Abre y guarda archivos protegidos con contrasena mediante cifrado agile AES-128 y AES-256.
Cifrado →Crea decks por codigo con el builder fluido, o conviertelos a Markdown limpio o HTML posicionado con extraccion de medios y notas del orador.
API Builder →Cada etiqueta de la interfaz se resuelve a traves de una de las mas de 1.600 claves de traduccion pptx.*, conectadas a la libreria i18n que tu aplicacion ya usa: react-i18next, vue-i18n o ngx-translate.
Localizacion →Automatizacion
pptx-viewer-mcp expone 73 herramientas PPTX con esquemas Zod sobre el Model Context Protocol, de modo que Claude, Cursor y Copilot pueden leer, editar y convertir presentaciones directamente. Las mismas funciones corren en headless en Node, Bun o entornos serverless, y una CLI cubre las conversiones puntuales.
MCP y herramientas →
{
"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);Inicio rapido
Instala el paquete de tu framework, pasa los bytes .pptx sin procesar y dale una altura al contenedor. Edicion, presentacion, colaboracion y exportacion estan a una prop de distancia.
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
Si. Todo tiene licencia Apache-2.0: el nucleo, los cinco paquetes de UI, el servidor MCP y las demos. No hay un plan de pago.
Si. El guardado escribe OpenXML valido conservando temas, patrones, disenos y la conformidad OOXML Strict, asi que un deck cargado, editado y guardado aqui se reabre limpio en PowerPoint.
No. El analisis, el renderizado, la edicion y el guardado ocurren en el navegador. El nucleo tambien corre en Node.js y Bun para trabajo del lado del servidor o por CLI.
Como HTML, CSS y SVG nativos en lugar de un bitmap de canvas. El texto sigue siendo seleccionable, el zoom se mantiene nitido y los lectores de pantalla funcionan.
El transporte entre pares incluido usa infraestructura de senalizacion de y-webrtc. Para persistencia, autenticacion o redes controladas, proporciona un servicio de colaboracion como un relay y-websocket. Colaboracion →
Si. El cifrado agile AES-128 y AES-256 esta soportado tanto al abrir como al guardar.
React 18/19, Vue 3, Angular, Svelte 5 y una version vanilla sin framework. Comparten el motor y la logica de renderizado neutral al framework, mientras cada binding aporta su propia capa de vista.
El contenido OLE se puede reemplazar, y se pueden editar hojas, documentos y titulos de decks anidados compatibles. Algunos efectos visuales se aproximan en pantalla. La pagina de limitaciones detalla exactamente que esperar. Limitaciones →
Empezar
Anade soporte de PowerPoint a tu aplicacion con una sola dependencia. Licencia Apache-2.0, TypeScript estricto, sin dependencias nativas. Prueba la demo con uno de tus decks y despues sigue el inicio rapido.