Quickstart | PPTX Editor

Build a browser editor that opens a local .pptx and downloads the edited file.

Install the editor

In an existing React or Vue app, install the adapter and its engine peer:

npm install @pptx-editor.dev/react @pptx-editor.dev/core

npm install @pptx-editor.dev/vue @pptx-editor.dev/core

These examples run in a client-rendered app. For server rendering, follow the framework setup.

Open and save a deck

This component opens a local file and downloads the edited presentation. The ref's save() returns the saved package as bytes.

// App.tsx
import { useRef, useState, type ChangeEvent } from 'react';
import { PptxEditor, type PptxEditorRef } from '@pptx-editor.dev/react';
import '@pptx-editor.dev/core/styles/editor.css';

export default function App() {
  const [bytes, setBytes] = useState<Uint8Array>();
  const editorRef = useRef<PptxEditorRef>(null);

  async function pick(e: ChangeEvent<HTMLInputElement>) {
    const file = e.target.files?.[0];
    if (file) setBytes(new Uint8Array(await file.arrayBuffer()));
  }

  function download() {
    const saved = editorRef.current?.save();
    if (!saved) return;
    const blob = new Blob([saved], {
      type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
    });
    const url = URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = 'edited.pptx';
    link.click();
    URL.revokeObjectURL(url);
  }

  return (
    <main style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
      <div>
        <label>
          Open a .pptx file <input type="file" accept=".pptx" onChange={pick} />
        </label>
        <button onClick={download} disabled={!bytes}>
          Download
        </button>
      </div>
      <div style={{ flex: 1, minHeight: 0 }}>
        {bytes && <PptxEditor ref={editorRef} document={bytes} mode="edit" />}
      </div>
    </main>
  );
}

<!-- App.vue -->
<script setup lang="ts">
import { ref, shallowRef } from 'vue';
import { PptxEditor, type PptxEditorRef } from '@pptx-editor.dev/vue';
import '@pptx-editor.dev/core/styles/editor.css';

const bytes = shallowRef<Uint8Array>();
const editorRef = ref<PptxEditorRef | null>(null);

async function pick(e: Event) {
  const file = (e.target as HTMLInputElement).files?.[0];
  if (file) bytes.value = new Uint8Array(await file.arrayBuffer());
}

function download() {
  const saved = editorRef.value?.save();
  if (!saved) return;
  const blob = new Blob([saved], {
    type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
  });
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'edited.pptx';
  link.click();
  URL.revokeObjectURL(url);
}
</script>

<template>
  <main style="display: flex; flex-direction: column; height: 100vh">
    <div>
      <label>Open a .pptx file <input type="file" accept=".pptx" @change="pick" /></label>
      <button :disabled="!bytes" @click="download">Download</button>
    </div>
    <div style="flex: 1; min-height: 0">
      <PptxEditor v-if="bytes" ref="editorRef" :document="bytes" mode="edit" />
    </div>
  </main>
</template>

Check the required options

Option	Values	Notes
`document`	`Uint8Array`	A new array opens a new presentation. Keep its identity stable between renders.
`mode`	`'edit'` or `'view'`	Defaults to `'edit'`. Changes apply without reopening the file.
`save()` on the ref	`Uint8Array<ArrayBuffer> \| null`	Returns the `.pptx` bytes synchronously, or `null` when no presentation is open.
Stylesheet	`@pptx-editor.dev/core/styles/editor.css`	Import once after your CSS reset. Both adapters also export `styles.css`.
Container height	A nonzero CSS height	The editor fills its parent. Set `min-height: 0` on a flex child.

The editor opens and saves the presentation in the browser. Your application owns downloads, uploads, and storage.

Handle the editor lifecycle

The adapter creates the editor instance and calls destroy() when the component unmounts.

onReady in React and @ready in Vue report instance creation, not successful file loading. Read snapshot().status for document readiness. The packaged editor shows loading and open-failure notices.

Opening another file replaces the presentation and its undo history. Add an unsaved-change check before replacing document in your application.

For URL loading and storage, see Loading and saving. For every prop and ref method, see React props or Vue props.

Next steps

Installation: requirements, styles, and bundler setup.
Vite, Vite with Vue, and Next.js: set up the editor in your framework.
React props and Vue props: every option, event, and ref method.
Customization: arrange the toolbar, menus, and panes.
PPTX fidelity: what you can edit, display, and save.