Open source · Apache-2.0 · TypeScript

El motor de PowerPoint
para la web.

Carga, renderiza, edita y guarda archivos .pptx en el navegador o en Node.js. Disponible como nucleo TypeScript headless y componentes listos para usar en React, Vue 3, Angular, Svelte 5 y JavaScript vanilla.

Empezar Abrir la demo

npx @christophervr/pptx-viewer

sample-deck.pptx · en vivo en el navegadorProbar →

The pptx viewer editing a real deck: flipping slides, dragging an element, and rendering a chart

Renderizado

Las diapositivas se renderizan como HTML, CSS y SVG.El texto sigue siendo seleccionable, el zoom se mantiene nitido,y los archivos guardados se reabren sin problemas en PowerPoint.

Renderizado

Cubre toda la superficie de OpenXML.

Mas de 187 formas predefinidas, 23 tipos de graficos, SmartArt, animaciones, transiciones morph, metarchivos EMF y WMF, fuentes incrustadas y modelos 3D se dibujan con HTML, CSS y SVG. No hay rasterizacion en canvas: el texto sigue siendo seleccionable y los lectores de pantalla siguen funcionando.

Como funciona el renderizado →

christophervr.github.io/pptx-viewer/demo

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

Modelo de datos

Cargalo, cambialo, guardalo.

Cargar un archivo .pptx produce un modelo PptxData completamente tipado con dieciseis tipos de elementos. Temas, patrones, disenos y la conformidad OOXML Strict sobreviven al viaje de ida y vuelta: un deck editado se reabre limpiamente en PowerPoint.

Carga y analisis →

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

Un motor. Todos los frameworks, o ninguno.

El visor se integra como componente listo para usar en React, Vue 3, Angular y Svelte 5, mas una version JavaScript vanilla sin framework. Cada paquete incluye el motor: una sola dependencia ofrece el mismo renderizado en todas partes, incluidos el modo presentador, la edicion y la exportacion.

Elige un framework →

Reactpptx-react-viewer

<PowerPointViewer />

Vue 3pptx-vue-viewer

<PowerPointViewer />

Angularpptx-angular-viewer

<pptx-viewer />

Automatizacion

Usalo headless, desde la CLI o por MCP.

pptx-viewer-mcp expone mas de 50 herramientas PPTX con esquemas Zod como servidor MCP: Claude, Cursor y Copilot pueden leer, editar y convertir presentaciones directamente. Las mismas funciones se pueden llamar desde tu propio codigo en Node, Bun o entornos serverless.

MCP y herramientas →

claude_desktop_config.json

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

replaceTextaddSlideconvertToMarkdownextractMediaapplyTheme+ 45 more

Tambien incluido

Colaboracion en tiempo real

Coedita mediante un CRDT de Yjs con presencia, fusion de texto a nivel de caracter y un transporte P2P sin servidor.

Cifrado

Abre y guarda archivos protegidos con contrasena mediante cifrado agil AES-128 y AES-256.

Exportacion

PNG, JPEG, SVG, PDF, GIF y video desde el navegador. La exportacion SVG tambien funciona en Node.js sin DOM.

Conversion a Markdown

Convierte los decks en Markdown limpio o HTML posicionado, con extraccion de medios, notas del orador y metadatos.

API Builder

Crea presentaciones por codigo: texto, formas, imagenes, tablas y graficos sin tocar OpenXML en bruto.

Limitaciones

Los objetos OLE son de solo lectura y algunos efectos visuales se aproximan en pantalla. La pagina de limitaciones detalla exactamente que esperar.

Localizacion

Cada etiqueta de la interfaz pasa por una clave de traduccion pptx.* (mas de 1.600), conectada a la biblioteca i18n de tu aplicacion: react-i18next, vue-i18n o ngx-translate. Cada paquete incluye un diccionario en ingles, y esta documentacion esta disponible en ingles, frances, espanol y aleman.

Elige tu stack

Instala un solo paquete.

Cada paquete de UI incluye el motor, asi que basta con una sola dependencia. No sabes cual elegir? npx @christophervr/pptx-viewer te guia paso a paso.

npm i pptx-react-viewer

Visor + editor WYSIWYG para React 19

npm i pptx-vue-viewer

Las mismas funciones para Vue 3

npm i pptx-angular-viewer

Las mismas funciones para Angular

npm i pptx-vanilla-viewer

El mismo motor, sin framework, DOM puro

npm i pptx-svelte-viewer

Las mismas funciones para Svelte 5

npm i pptx-viewer-core

Motor headless: analisis, edicion, conversion, cifrado