# PPTX Editor: @pptx-editor.dev/* (0.x line) > Open-source PPTX editor for React and Vue 3. Open, edit, and save .pptx presentations in the browser, with no document-processing server. The engine parses PresentationML, lays out and paints slides as SVG, and saves the package. Comments, suggestions, realtime collaboration, and advanced drawing come from the commercially licensed `@pptx-editor.dev/pro`. Automate a deck with the Office.js compatible `@pptx-editor.dev/editor-api`, and convert it to PDF on Node.js with `@pptx-editor.dev/pptx-to-pdf`. ## Packages (0.x) All 7 packages release together at one version. Keep every @pptx-editor.dev package on the same version, with one resolved copy of `@pptx-editor.dev/core`. Import `@pptx-editor.dev/core/styles/editor.css` once in any app that shows the editor. ### `@pptx-editor.dev/react` The React adapter. `` renders a complete editor, and its compound parts (`PptxEditor.Root`, `.Viewport`, `.Toolbar`, `.SlideRail`, `.Content`, `.NotesPane`, `.Slideshow`) let you compose your own layout. Hooks (`usePptxEditor`, `useEditorState`, `useEditorCommand`, `useEditorEvent`, `useTranslation`, `useSlideshow`) read the engine. `@pptx-editor.dev/core`, `react`, and `react-dom` are peer dependencies. Open source, Apache-2.0. Subpath exports: - `@pptx-editor.dev/react`: components, compound parts, and hooks - `@pptx-editor.dev/react/styles.css`: adapter stylesheet ```bash npm install @pptx-editor.dev/react @pptx-editor.dev/core ``` ### `@pptx-editor.dev/vue` The Vue 3 adapter: the same editor, compound parts, and composables as the React adapter, from the package root. `@pptx-editor.dev/core` and `vue` are peer dependencies. Render it on the client only. Open source, Apache-2.0. Subpath exports: - `@pptx-editor.dev/vue`: components, compound parts, and composables - `@pptx-editor.dev/vue/styles.css`: adapter stylesheet ```bash npm install @pptx-editor.dev/vue @pptx-editor.dev/core ``` ### `@pptx-editor.dev/core` The framework-agnostic engine. It reads a `.pptx` into one document store, resolves master, layout, and slide inheritance, lays out slides without the DOM, paints them as SVG, applies edits as serializable operations, and saves the package. `createPptxEditor` is the editor facade the adapters render. Import `@pptx-editor.dev/core/styles/editor.css` once in any app that shows the editor. Open source, Apache-2.0. Subpath exports: - `@pptx-editor.dev/core`: the editor facade (same as `./editor`) - `@pptx-editor.dev/core/editor`: `createPptxEditor`, commands, events, and the chrome registry - `@pptx-editor.dev/core/store`: bounded OPC read and write, the canonical tree, operations, and the store - `@pptx-editor.dev/core/cascade`: master, layout, and slide inheritance; theme colors and fonts - `@pptx-editor.dev/core/layout`: DOM-free geometry and text layout, `setHarfBuzzWasmUrl` - `@pptx-editor.dev/core/output`: SVG paint - `@pptx-editor.dev/core/automation`: the protocol `@pptx-editor.dev/editor-api` drives: DOM-free edits and the automation host - `@pptx-editor.dev/core/contracts`: shared types - `@pptx-editor.dev/core/harfbuzz.wasm`: the text shaper, for bundlers that do not emit it (Bun, esbuild) - `@pptx-editor.dev/core/styles/editor.css`: editor tokens and chrome styles ```bash npm install @pptx-editor.dev/core ``` ### `@pptx-editor.dev/i18n` Typed strings for the editor chrome. English is the source of truth and is in the package root; `createTranslator` builds a translator from a locale catalog. The adapters depend on it, so install it directly only to import a locale. Open source, Apache-2.0. Subpath exports: - `@pptx-editor.dev/i18n`: `englishCatalog`, `createTranslator`, and the catalog types - `@pptx-editor.dev/i18n/ja`: Japanese - `@pptx-editor.dev/i18n/ko`: Korean - `@pptx-editor.dev/i18n/zh-CN`: Simplified Chinese - `@pptx-editor.dev/i18n/en.json`: the English catalog as JSON ```bash npm install @pptx-editor.dev/i18n ``` ### `@pptx-editor.dev/pro` Commercial capabilities, registered as editor modules through the `modules` option: comments and suggestions (`reviewModule`), realtime collaboration over Yjs (`collaborationModule`, `createYjsCollaborationSession`), and advanced drawing (charts, 3-D shapes, glow, inner shadow, reflection, and soft edge). Without a license key, the modules run in evaluation mode and make no network request. Commercial license (`LicenseRef-EigenPal-Pro-Evaluation-1.0`): free to evaluate, production use needs an agreement (licensing@eigenpal.com). Subpath exports: - `@pptx-editor.dev/pro`: `reviewModule`, `collaborationModule`, `createYjsCollaborationSession` - `@pptx-editor.dev/pro/drawing`: `drawingModule`, `installDrawing` - `@pptx-editor.dev/pro/react`: `PptxEditorReview`, `useReview`, `useReviewOf`, `useReviewItem`, `useReviewAuthor` for React - `@pptx-editor.dev/pro/vue`: `PptxEditorReview`, `useReview`, `useReviewOf`, `useReviewItem`, `useReviewAuthor` for Vue 3 ```bash npm install @pptx-editor.dev/pro @pptx-editor.dev/core ``` ### `@pptx-editor.dev/editor-api` Presentation automation with an Office.js compatible, batching object model (`context.presentation`, `load`, `context.sync`). It drives a deck on a server, or an editor already open in a page. Commercial license (`LicenseRef-EigenPal-Pro-Evaluation-1.0`): free to evaluate, production use needs an agreement (licensing@eigenpal.com). Subpath exports: - `@pptx-editor.dev/editor-api`: `PptxEditor.createServer`, for a deck held as bytes - `@pptx-editor.dev/editor-api/browser`: `PptxEditor.createBrowser`, for a live editor, plus everything in the root ```bash npm install @pptx-editor.dev/editor-api @pptx-editor.dev/core ``` ### `@pptx-editor.dev/pptx-to-pdf` Convert `.pptx` to PDF on Node.js through the editor's own layout engine, with searchable text and embedded fonts. `exportPdf` returns the bytes and a list of diagnostics; the default `fidelityPolicy: 'strict'` throws `PdfFidelityError` when a slide has content the PDF cannot reproduce. `@docx-editor.dev/fonts-cjk` is an optional peer for East Asian text. Commercial license (`LicenseRef-EigenPal-Pro-Evaluation-1.0`): free to evaluate, production use needs an agreement (licensing@eigenpal.com). Subpath exports: - `@pptx-editor.dev/pptx-to-pdf`: `exportPdf`, `exportPdfFrom`, `openDocumentForExport` ```bash npm install @pptx-editor.dev/pptx-to-pdf @pptx-editor.dev/core ``` ## Versioning - 0.x docs (current): https://www.pptx-editor.dev/docs/0.x, also reachable at the stable alias https://www.pptx-editor.dev/docs/latest - Generated API reference (every published subpath of every package): https://www.pptx-editor.dev/docs/0.x/api - Each guide listed below also has a Markdown version: replace /docs/ in the guide URL with /docs/llms.md/. For example: https://www.pptx-editor.dev/docs/llms.md/0.x/installation ## Links - [Live editor demo](https://www.pptx-editor.dev/editor): open, edit, and save a .pptx deck in the browser - [Pricing and commercial licensing](https://www.pptx-editor.dev/#pricing): Pro modules, the editor API, and PDF export - [npm: @pptx-editor.dev/react](https://www.npmjs.com/package/@pptx-editor.dev/react) - [npm: @pptx-editor.dev/vue](https://www.npmjs.com/package/@pptx-editor.dev/vue) - [npm: @pptx-editor.dev/core](https://www.npmjs.com/package/@pptx-editor.dev/core) - [npm: @pptx-editor.dev/i18n](https://www.npmjs.com/package/@pptx-editor.dev/i18n) - [npm: @pptx-editor.dev/pro](https://www.npmjs.com/package/@pptx-editor.dev/pro) - [npm: @pptx-editor.dev/editor-api](https://www.npmjs.com/package/@pptx-editor.dev/editor-api) - [npm: @pptx-editor.dev/pptx-to-pdf](https://www.npmjs.com/package/@pptx-editor.dev/pptx-to-pdf) - [GitHub](https://github.com/eigenpal/pptx-editor): source, issues, and discussions - [llms-full.txt](https://www.pptx-editor.dev/llms-full.txt): every 0.x guide in one text document; the generated API reference stays on its own pages ## Getting started - [Accessibility](https://www.pptx-editor.dev/docs/0.x/accessibility): What the host page provides, how the keyboard moves through the editor, what a screen reader hears, and the known limits. - [Examples](https://www.pptx-editor.dev/docs/0.x/examples): Choose a React, Vue, Next.js, or chat panel integration for your application. - [Installation](https://www.pptx-editor.dev/docs/0.x/installation): Install the PPTX editor packages, check runtime requirements, add the stylesheet, and set up your bundler. - [PPTX fidelity](https://www.pptx-editor.dev/docs/0.x/pptx-fidelity): Check which PPTX features you can edit, display, and preserve on save, and the known approximations of the renderer. - [Quickstart](https://www.pptx-editor.dev/docs/0.x/quickstart): Open, edit, and save a .pptx in the browser with React or Vue in one file. - [Introduction](https://www.pptx-editor.dev/docs/0.x): Browser-based WYSIWYG PPTX editor for React and Vue 3, built on the ECMA-376 standard. ## Reference - [Engine architecture](https://www.pptx-editor.dev/docs/0.x/core/architecture): Understand the shared parse, edit, layout, render, and save pipeline. - [@pptx-editor.dev/core](https://www.pptx-editor.dev/docs/0.x/core): Create a framework-independent editor and use its state, commands, and lifecycle. - [Editor mount modes](https://www.pptx-editor.dev/docs/0.x/core/mount-modes): Attach, detach, and dispose a browser editor without replacing its presentation. - [Contribute translations](https://www.pptx-editor.dev/docs/0.x/i18n/contributing): Add or update a language catalog while preserving keys and placeholders. - [@pptx-editor.dev/i18n](https://www.pptx-editor.dev/docs/0.x/i18n): Use typed interface translations and packaged language catalogs. ## Customization - [Appearance](https://www.pptx-editor.dev/docs/0.x/customization/appearance): Customize PPTX editor appearance with CSS color tokens, dark mode, borders, spacing, and control states. - [Dialogs](https://www.pptx-editor.dev/docs/0.x/customization/dialogs): Customize PPTX editor dialogs and popups with named parts, application renderers, draft state, validation, and CSS tokens. - [Fonts](https://www.pptx-editor.dev/docs/0.x/customization/fonts): Load font bytes for PPTX editor layout, choose font sources, replace fonts in place, and see which face measures each family. - [Overview](https://www.pptx-editor.dev/docs/0.x/customization): Customize your PPTX editor with CSS themes, React and Vue parts, the toolbar, menus, and dialogs. - [Language](https://www.pptx-editor.dev/docs/0.x/customization/language): Translate the PPTX editor interface with a locale catalog, add a language, and translate your own controls. - [Layout](https://www.pptx-editor.dev/docs/0.x/customization/layout): Place the PPTX editor toolbar, menu bar, slide canvas, slide rail, speaker notes, zoom control, and side panel. - [Menus](https://www.pptx-editor.dev/docs/0.x/customization/menus): Customize the PPTX editor menu bar and context menus with registered slot rows, application rows, groups, and submenus. - [Ribbon](https://www.pptx-editor.dev/docs/0.x/customization/ribbon): Use tabs and contextual tabs in the PPTX editor, and change each tab with toolbar parts. - [Toolbar](https://www.pptx-editor.dev/docs/0.x/customization/toolbar): Customize the PPTX editor toolbar with named controls, command slots, application actions, groups, and responsive overflow. - [Dialog reference](https://www.pptx-editor.dev/docs/0.x/customization/reference/dialogs): Every PPTX editor popup registry key, dialog part option, dialog field, and popup lifetime rule. - [Layout reference](https://www.pptx-editor.dev/docs/0.x/customization/reference/layout): Every PPTX editor layout part, pane prop, state attribute, root prop, and open-failure option. - [Menu reference](https://www.pptx-editor.dev/docs/0.x/customization/reference/menus): Every PPTX editor menu part option, named row, menu-only slot, dialog row, and context menu arrangement. - [Toolbar reference](https://www.pptx-editor.dev/docs/0.x/customization/reference/toolbar): Every PPTX editor toolbar group, slot, named part, group option, keyboard rule, and command state rule. ## Editing API - [Batching, loading, and errors](https://www.pptx-editor.dev/docs/0.x/editor-api/batching-and-errors): Load proxy values, batch edits, and recover from errors without repeating applied writes. - [Editing API](https://www.pptx-editor.dev/docs/0.x/editor-api): Edit PPTX slides, shapes, text, and tables on a server or in an open editor. - [Office.js compatibility](https://www.pptx-editor.dev/docs/0.x/editor-api/office-js-api): Compare the supported Office.js presentation API subset, known differences, and unavailable APIs. - [Pictures](https://www.pptx-editor.dev/docs/0.x/editor-api/pictures): Export slide previews and set picture fills through the editing API. - [API member directory](https://www.pptx-editor.dev/docs/0.x/editor-api/reference): Find editing API object families, runtime members, and task guides. - [Runtime and lifecycle](https://www.pptx-editor.dev/docs/0.x/editor-api/runtime): Choose a server or browser runtime, configure fonts, and dispose resources. - [Slides and shapes](https://www.pptx-editor.dev/docs/0.x/editor-api/slides-and-shapes): Find slides, add shapes, and change their positions with the editing API. - [Tables](https://www.pptx-editor.dev/docs/0.x/editor-api/tables): Create tables, populate cells, and apply cell formatting with the editing API. - [Text and ranges](https://www.pptx-editor.dev/docs/0.x/editor-api/text-and-ranges): Read, replace, and format text with TextFrame and TextRange. ## Frameworks - [Frameworks](https://www.pptx-editor.dev/docs/0.x/frameworks): Choose a React or Vue framework setup for your PPTX editor. - [Next.js](https://www.pptx-editor.dev/docs/0.x/frameworks/nextjs): Set up a Next.js PPTX editor in the App Router with dynamic() and ssr: false. - [Vite with Vue](https://www.pptx-editor.dev/docs/0.x/frameworks/vite-vue): Set up a client-rendered Vue 3 PPTX editor with Vite. - [Vite](https://www.pptx-editor.dev/docs/0.x/frameworks/vite): Build a client-rendered Vite PPTX editor with React. ## Guides - [Add 3-D effects](https://www.pptx-editor.dev/docs/0.x/guides/3d-effects): Set and remove bevels, 3-D rotation, and blur on shapes, and learn how 3-D shapes draw. - [Animations and transitions](https://www.pptx-editor.dev/docs/0.x/guides/animations): List, add, reorder, time, and remove the effects of a slide, and set its transition. - [Charts](https://www.pptx-editor.dev/docs/0.x/guides/charts): Insert charts, change their type, title, legend, axes, and colors, edit the data that a chart plots, and draw charts from their chart parts. - [Show the editor beside a chat](https://www.pptx-editor.dev/docs/0.x/guides/chat-panel): Put the PPTX editor in a panel next to a chat, with a layout for a tall panel. - [Copy and paste](https://www.pptx-editor.dev/docs/0.x/guides/copy-and-paste): What copy writes and paste reads, between the editor and other applications, how a desktop host pastes editable shapes, and the paste commands for hosts. - [Diagrams](https://www.pptx-editor.dev/docs/0.x/guides/diagrams): Type in the shapes of a diagram, edit their text in the Diagram tab, and add and delete diagram shapes. - [Chinese, Japanese, and Korean text](https://www.pptx-editor.dev/docs/0.x/guides/east-asian-text): Fonts, line breaking, input methods, PDF export, and interface languages for East Asian decks. - [Equations](https://www.pptx-editor.dev/docs/0.x/guides/equations): Insert and edit equations from a linear form, and learn how equations draw and save. - [Export presentations](https://www.pptx-editor.dev/docs/0.x/guides/export): Save PPTX files, export slide images in the browser, or create PDFs on a server. - [Insert and format images](https://www.pptx-editor.dev/docs/0.x/guides/images): Insert image bytes, resize pictures, set alt text, and handle selection-dependent edits. - [Load and save presentations](https://www.pptx-editor.dev/docs/0.x/guides/loading-and-saving): Open PPTX bytes, save changes, and connect the editor to your storage. - [Long decks](https://www.pptx-editor.dev/docs/0.x/guides/long-decks): Open long presentations progressively, track pending slides, and handle damaged content. - [Navigate a presentation](https://www.pptx-editor.dev/docs/0.x/guides/navigation): Select slides, build a slide counter, and find text through the editor API. - [Handle open failures](https://www.pptx-editor.dev/docs/0.x/guides/open-failures): Handle refused files, failed commands, and damaged slides without losing the visible presentation. - [PDF export](https://www.pptx-editor.dev/docs/0.x/guides/pdf-export): Add a PDF export to the editor: the browser sends the saved deck to your server, and the server converts it with @pptx-editor.dev/pptx-to-pdf. - [Print a presentation](https://www.pptx-editor.dev/docs/0.x/guides/print): Create a PDF for a presentation printing workflow. - [Edit layouts and masters](https://www.pptx-editor.dev/docs/0.x/guides/slide-master): Open the slide master view to edit slide layouts and masters, and update every slide that uses them. - [Tables and cells](https://www.pptx-editor.dev/docs/0.x/guides/tables): Insert tables, type in cells, add or delete rows and columns, merge and split cells, and format tables. - [Warp text](https://www.pptx-editor.dev/docs/0.x/guides/text-warp): Set, change, and remove the preset text warp of shapes, and learn how warped text draws. - [Undo and history groups](https://www.pptx-editor.dev/docs/0.x/guides/undo-history): What one undo step holds, what undo and redo restore, and how to make several of your own commands one undo step. - [Zoom](https://www.pptx-editor.dev/docs/0.x/guides/zoom): Set the slide scale or fit the slide to the editor viewport. ## Pro - [Collaboration](https://www.pptx-editor.dev/docs/0.x/pro/collaboration): Connect a Yjs document, report provider status, and release collaboration resources. - [Comments](https://www.pptx-editor.dev/docs/0.x/pro/comments): Show, add, reply to, edit, resolve, and delete slide comments. - [Drawing](https://www.pptx-editor.dev/docs/0.x/pro/drawing): Register advanced drawing renderers for charts and shape effects. - [Pro modules](https://www.pptx-editor.dev/docs/0.x/pro): Add collaboration, comments, and advanced drawing through editor modules. - [Review colors and styling](https://www.pptx-editor.dev/docs/0.x/pro/review-styling): Color comments by author, style the highlights and markers on the slide, and style the comments pane with CSS tokens. ## Task recipes - [Overview](https://www.pptx-editor.dev/docs/0.x/recipes): Combine editor APIs to complete common presentation tasks. - [Fill with a pattern or picture](https://www.pptx-editor.dev/docs/0.x/recipes/pattern-picture-fills): Set a preset pattern or a picture on shapes and slide backgrounds, as one undo step. - [Set a picture bullet](https://www.pptx-editor.dev/docs/0.x/recipes/picture-bullets): Use a PNG, JPEG, or GIF picture as the bullet of the selected paragraphs. - [Find and replace text](https://www.pptx-editor.dev/docs/0.x/recipes/replace-text): Replace matching text across slides, tables, and notes as one undo step. - [Adjust a preset shape](https://www.pptx-editor.dev/docs/0.x/recipes/shape-adjustments): Change the corner radius, arrowhead, or other adjust values of a preset shape. - [Link to a slide, a custom show, a file, or an email address](https://www.pptx-editor.dev/docs/0.x/recipes/slide-email-links): Link selected text to a slide, a relative slide, a custom show, another file, or an email address. - [Change the slide size](https://www.pptx-editor.dev/docs/0.x/recipes/slide-size): Resize every slide and scale the content to fit, as one undo step. ## Export formats - [PDF API](https://www.pptx-editor.dev/docs/0.x/export/pdf/api): Reference PDF export functions, options, results, diagnostic severity, and errors. - [PDF fonts](https://www.pptx-editor.dev/docs/0.x/export/pdf/fonts): Supply font bytes, deploy substitute fonts, and inspect font diagnostics. - [PDF export](https://www.pptx-editor.dev/docs/0.x/export/pdf): Convert PPTX to PDF on Node.js and inspect conversion diagnostics. - [PDF integrations](https://www.pptx-editor.dev/docs/0.x/export/pdf/integrations): Reuse export sessions and serve PDF results from a Node.js application. ## React - [@pptx-editor.dev/react](https://www.pptx-editor.dev/docs/0.x/react): Use the React PPTX editor, arrange packaged components, or build custom controls with hooks. - [Props](https://www.pptx-editor.dev/docs/0.x/react/props): Configure the React PPTX editor document, mode, fonts, chrome, callbacks, and ref. - [Composition](https://www.pptx-editor.dev/docs/0.x/react/composition): Build a custom React PPTX editor from the root, the viewport, the content, and compound parts. - [Hooks](https://www.pptx-editor.dev/docs/0.x/react/hooks): Connect React controls to PPTX editor state and commands with hooks. - [React examples](https://www.pptx-editor.dev/docs/0.x/react/examples): Find React examples for loading, saving, custom chrome, and the example applications. ## Vue - [@pptx-editor.dev/vue](https://www.pptx-editor.dev/docs/0.x/vue): Use the Vue 3 PPTX editor, arrange packaged components, or build custom controls with composables. - [Props](https://www.pptx-editor.dev/docs/0.x/vue/props): Reference for the Vue PPTX editor props, events, slots, and the six ref methods. - [Composition](https://www.pptx-editor.dev/docs/0.x/vue/composition): Build a custom Vue PPTX editor from the root, the viewport, the content, and compound parts. - [Composables](https://www.pptx-editor.dev/docs/0.x/vue/composables): Connect Vue controls to PPTX editor state and commands with composables. - [Vue examples](https://www.pptx-editor.dev/docs/0.x/vue/examples): Find Vue examples for loading, saving, custom chrome, and the example application.