Embed an open-source presentation editor in your app. Edit slides, shapes, tables, and speaker notes. Open and save .pptx files in the browser.
Test @pptx-editor.dev/react in your browser. Edit the sample or open your own .pptx file, then save your changes. Files are processed locally.
Open, edit, and save .pptx presentations in the browser. Parsing, layout, painting, and saving all run client-side.
Edit slides, shapes, text, and tables from code, on a server or in an open editor. A supported subset of the Office.js presentation API, with calls batched until sync().
Edit text, shapes, pictures, tables, notes, and sections, with undo and redo. Themes, layouts, and masters render to ECMA-376, with text shaped by HarfBuzz.
Save what you edit and keep everything else. Unknown markup, media, and fonts stay in the .pptx. An edit the editor cannot make returns a reason. It is never silently dropped.
Edit one deck together through a Yjs session. Each peer's selection shows with a name and a color. Your app owns transport, authentication, and storage.
Replace or hide toolbar, ribbon, menu, and dialog controls, or compose your own editor from public parts. Theme the chrome light or dark with --doc-* tokens.
Two adapters over one engine. @pptx-editor.dev/react and /vue share the stylesheet, the commands, and the parts.
Convert a deck to PDF on Node.js with the editor's own layout and searchable text. Diagnostics name what the PDF approximates.
Export one slide as PNG or SVG, or every slide as PNG files in a ZIP. It runs in the browser, from the open editor.
The drawing module draws bar, column, line, area, scatter, pie, doughnut, and radar charts from the values the deck caches.
Cards marked Pro need a package under the EigenPal Pro License. For feature-by-feature support, see PPTX fidelity.
DOCX Editor is our open-source document editor for React and Vue. It opens and saves .docx files in the browser, with tracked changes and threaded comments. Both editors are built the same way:
React and Vue components, installed the same way.
An Office.js-style API that works on a server or in the browser.
Save your edits without losing anything else in the file.
Real-time collaboration and PDF export, in both editors.
$ npm install @pptx-editor.dev/react @pptx-editor.dev/core
$ npm install @docx-editor.dev/react @docx-editor.dev/core
An Office.js compatible API for slides, shapes, text, and tables. Queue changes in code, then call context.sync() to apply them in Node.js or the browser.
import { readFile, writeFile } from 'node:fs/promises';
import { PptxEditor } from '@pptx-editor.dev/editor-api';
const bytes = await readFile('deck.pptx');
const runtime = await PptxEditor.createServer(bytes);
try {
await runtime.run(async (context) => {
const slide = context.presentation.slides.getItemAt(0);
const title = slide.shapes.addTextBox('Quarterly results', {
left: 40,
top: 40,
width: 400,
});
title.textFrame.textRange.font.bold = true;
await context.sync(); // the queued calls run here
});
await writeFile('edited.pptx', await runtime.save());
} finally {
runtime.dispose();
}
// In a page, call createBrowser(editor) from
// '@pptx-editor.dev/editor-api/browser' instead.Read a .pptx file, batch changes, and save the result. Run scripts and background jobs without a browser.
Runtime and lifecycle BrowserApply changes to the open presentation. Each sync that writes creates one undo step and preserves the previous slide and selection for undo.
Text and rangesWrap Editing API calls in agent tools. This example adds text to the current slide. Each sync that writes creates one undo step.
Arrange the toolbar, slide rail, canvas, and notes in your own layout. Connect controls to editor state with React hooks or Vue composables.
Takeaway: expand the pilot to every region.
import { tool } from 'ai';
import { z } from 'zod';
import { usePptxEditor } from '@pptx-editor.dev/react';
import { PptxEditor } from '@pptx-editor.dev/editor-api/browser';
// Combine presentation operations into an app-specific tool.
export function useTakeawayTool() {
const editor = usePptxEditor();
return tool({
description: 'Add a takeaway to the slide the user is on.',
inputSchema: z.object({ text: z.string() }),
execute: async ({ text }) => {
const runtime = PptxEditor.createBrowser(editor!);
try {
await runtime.run(async (context) => {
const index = editor!.snapshot().currentSlide;
const slide = context.presentation.slides.getItemAt(index);
slide.shapes.addTextBox(text, { left: 40, top: 400, width: 640 });
await context.sync(); // a sync that writes is one undo step
});
} finally {
runtime.dispose();
}
},
});
}<script setup lang="ts">
import { tool } from 'ai';
import { z } from 'zod';
import { usePptxEditor } from '@pptx-editor.dev/vue';
import { PptxEditor } from '@pptx-editor.dev/editor-api/browser';
// Combine presentation operations into an app-specific tool.
const editor = usePptxEditor();
const takeaway = tool({
description: 'Add a takeaway to the slide the user is on.',
inputSchema: z.object({ text: z.string() }),
execute: async ({ text }) => {
const runtime = PptxEditor.createBrowser(editor.value!);
try {
await runtime.run(async (context) => {
const index = editor.value!.snapshot().currentSlide;
const slide = context.presentation.slides.getItemAt(index);
slide.shapes.addTextBox(text, { left: 40, top: 400, width: 640 });
await context.sync(); // a sync that writes is one undo step
});
} finally {
runtime.dispose();
}
},
});
</script>import { PptxEditor, useEditorState } from '@pptx-editor.dev/react';
import '@pptx-editor.dev/react/styles.css';
// Your own control, reading editor state.
function SlideCounter() {
const current = useEditorState((s) => s.currentSlide);
const total = useEditorState((s) => s.slides.length);
return <span>{current + 1} / {total}</span>;
}
export function DeckEditor({ bytes }: { bytes: Uint8Array }) {
return (
<div style={{ height: '100vh' }}>
<PptxEditor.Root document={bytes}>
<PptxEditor.Viewport className="deck-workspace">
<PptxEditor.Toolbar />
<div className="deck-workspace__body">
<PptxEditor.SlideRail />
<div className="deck-workspace__main">
<PptxEditor.Content />
<PptxEditor.NotesPane />
</div>
</div>
<SlideCounter />
<PptxEditor.Slideshow />
</PptxEditor.Viewport>
</PptxEditor.Root>
</div>
);
}<script setup lang="ts">
import {
PptxEditorContent,
PptxEditorNotesPane,
PptxEditorRoot,
PptxEditorSlideRail,
PptxEditorSlideshow,
PptxEditorToolbar,
PptxEditorViewport,
} from '@pptx-editor.dev/vue';
import '@pptx-editor.dev/vue/styles.css';
// Your own control: it calls useEditorState((s) => s.currentSlide).
import SlideCounter from './SlideCounter.vue';
defineProps<{ bytes: Uint8Array }>();
</script>
<template>
<div style="height: 100vh">
<PptxEditorRoot :document="bytes">
<PptxEditorViewport class="deck-workspace">
<PptxEditorToolbar />
<div class="deck-workspace__body">
<PptxEditorSlideRail />
<div class="deck-workspace__main">
<PptxEditorContent />
<PptxEditorNotesPane />
</div>
</div>
<SlideCounter />
<PptxEditorSlideshow />
</PptxEditorViewport>
</PptxEditorRoot>
</div>
</template>The editor is Apache 2.0, free in commercial products. Pro adds collaboration, the Editing API, PDF export, and advanced drawing. Evaluation is free. Production use requires a commercial agreement.
Install from npm. No account and no key.
Free to evaluate. Production use needs a commercial agreement.
Or write to licensing@eigenpal.com.
Pro modules run in evaluation mode without a key. License checks make no network requests. Read the EigenPal Pro License or the Pro modules guide.
Pass presentation bytes to the editor. Call save() to get the edited file. Your app handles storage.
import { useRef } from 'react';
import { PptxEditor, type PptxEditorRef } from '@pptx-editor.dev/react';
import '@pptx-editor.dev/core/styles/editor.css';
export function Editor({ deck }: { deck: Uint8Array }) {
const editorRef = useRef<PptxEditorRef>(null);
async function save() {
const bytes = editorRef.current?.save();
if (!bytes) return;
await fetch('/api/decks/1', { method: 'PUT', body: bytes });
}
return (
<main style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
<button onClick={save}>Save</button>
<div style={{ flex: 1, minHeight: 0 }}>
<PptxEditor ref={editorRef} document={deck} mode="edit" />
</div>
</main>
);
}Full source for both adapters. React 18 or 19, or Vue 3.5 and later, as ESM.
Set up Vite, Vite with Vue, or Next.js.
Mount the editor in your client entry. Vite emits the HarfBuzz WASM file with no configuration.
View source (opens in a new tab)App Router, with the editor loaded through a client component and ssr: false.
View source (opens in a new tab)The Vue 3 adapter, mounted with createApp in a Vite app.
View source (opens in a new tab)PPTX Editor is an open-source WYSIWYG editor and rendering engine for .pptx presentations, with adapters for React and Vue 3. It opens the bytes of a deck, lays out and paints each slide by the ECMA-376 (Office Open XML) standard, and saves a .pptx again. Parsing, layout, editing, and saving run in the browser.
Yes. The editor packages, @pptx-editor.dev/core, @pptx-editor.dev/react, @pptx-editor.dev/vue, and @pptx-editor.dev/i18n, use the Apache 2.0 license, including in commercial products. Three packages use the EigenPal Pro License: @pptx-editor.dev/pro (collaboration, legacy comments, and advanced drawing), @pptx-editor.dev/editor-api (automation), and @pptx-editor.dev/pptx-to-pdf (PDF export). You can evaluate them at no cost. Production use needs a commercial agreement.
Two adapters over one engine. @pptx-editor.dev/react works with React 18 or 19, and @pptx-editor.dev/vue with Vue 3.5 or later. Both packages are ESM only. The repository has runnable examples for Vite, Vite with Vue, and Next.js. Install one copy of @pptx-editor.dev/core next to the adapter.
Yes. @pptx-editor.dev/vue is a Vue 3 adapter over the same engine as React, with a provider, composables, and the same editor parts. It needs Vue 3.5 or later. Start with the Vue guide, or run the Vite with Vue example.
Yes. The editor measures text with HarfBuzz and paints into the DOM, so it renders in the browser only. In the App Router, load it from a client component with dynamic() and ssr: false, and import the stylesheet once in the root layout. Turbopack and webpack emit the HarfBuzz WASM file with no configuration. See the Next.js setup.
No. The editor opens and saves the presentation in the browser, and your application owns uploads, downloads, and storage. A server is optional: use the Editing API to change decks in Node.js, or @pptx-editor.dev/pptx-to-pdf to convert them to PDF.
Yes, with @pptx-editor.dev/editor-api. It implements a documented subset of the Office.js presentation API for slides, shapes, text, tables, and pictures. PptxEditor.createServer(bytes) edits bytes on a server; createBrowser(editor) drives an open editor, where each sync that writes is one undo step. Calls queue until context.sync(). See Office.js compatibility.
Yes, on Node.js, with @pptx-editor.dev/pptx-to-pdf. The exporter uses the editor's own layout, and embeds fonts for searchable text. Hidden slides are left out by default. It reports what it approximates as diagnostics. Its default strict policy throws on unsupported or approximated content, and the best-effort policy can leave out a slide it cannot lay out. In the browser, you can export slides as PNG or SVG. See PDF export.
It stays in the file. The package model keeps content the editor does not interpret, so a save preserves untouched slides, unknown markup, and media. Animations and transitions are kept but not played, and charts are kept unchanged. The PPTX fidelity page reports editing, rendering, and round-trip support for each feature.
Yes, through @pptx-editor.dev/pro. Create a session with createYjsCollaborationSession() and register it with collaborationModule(). Edits and concurrent typing sync, and each peer's selection shows with a name and a color. Your application owns transport, authentication, authorization, and persistence. See Collaboration.
Comments are kept on save. The review module of @pptx-editor.dev/pro reads legacy comments from the deck; it adds no review pane or comment editing controls. PresentationML has no tracked-change markup for text, so there is no suggesting mode. See Comments.
The editor measures text with font bytes, not CSS. By default it uses the deck's embedded fonts, then metric-compatible substitutes, and it makes no network request. To match a brand typeface, load your own faces with loadFonts() and pass them through fonts. See Fonts.
Yes. Pass a locale catalog to the locale prop. @pptx-editor.dev/i18n includes English, Japanese, Korean, and Simplified Chinese, and a catalog can override only the strings you want to change. The interface language never translates the text of the deck. See Language.
Yes. The live demo runs the same @pptx-editor.dev/react package you install. Open your own .pptx, edit it, and save it back. The deck stays in your browser.
Start with the React or Vue quickstart, or test your files in the demo.