Introduction

Embed a presentation editor in your React or Vue application. Open .pptx bytes, edit slides, and save the presentation in the browser.

Use the packaged editor first. Compose its parts when you need custom controls or a different layout. Use the Editing API for server automation.

Install an editor

Install an adapter and the engine:

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

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

Render the editor in a container with a height:

import { PptxEditor } from '@pptx-editor.dev/react';
import '@pptx-editor.dev/core/styles/editor.css';

export default function App({ bytes }: { bytes: Uint8Array }) {
  return (
    <div style={{ height: '100vh' }}>
      <PptxEditor document={bytes} mode="edit" />
    </div>
  );
}

<script setup lang="ts">
import { PptxEditor } from '@pptx-editor.dev/vue';
import '@pptx-editor.dev/core/styles/editor.css';

defineProps<{ bytes: Uint8Array }>();
</script>

<template>
  <div style="height: 100vh">
    <PptxEditor :document="bytes" mode="edit" />
  </div>
</template>

To open and save files, continue with the quickstart.

Check packages and licenses

All packages release together with one version. The packages that use the EigenPal Pro License permit evaluation. Production use requires a commercial agreement; see each package's LICENSE.md.

Find a task guide

Next steps

• Quickstart: open, edit, and save a .pptx.
• Installation: check requirements, styles, and bundler setup.