PPTX editor for React

Use the React PPTX editor, arrange packaged components, or build custom controls with hooks.

Install and mount

Install the adapter, its engine peer, and React:

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

Import the stylesheet once and render <PptxEditor> in a container with a height:

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

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

<PptxEditor> renders the toolbar, the slide rail, the slide canvas, the speaker notes, the find bar, the notices, the loading sheet, the open-failure notice, and the slide show (F5).

Choose an API

Task	API	Guide
Configure the packaged editor	`<PptxEditor>` props and callbacks	React props
Arrange or replace chrome	`PptxEditor.Root`, `PptxEditor.Viewport`, `PptxEditor.Content`, `PptxEditor.Toolbar`, and the other parts	React composition
Build custom controls	`usePptxEditor`, `useEditorState`, `useEditorCommand`, `useEditorValueCommand`	React hooks
Translate the interface	`locale` and `useTranslation`	Language
Replace dialogs and popups	`popups` and `definePopup`	Dialogs

Limits

The adapter requires React 18 or 19 and one shared copy of @pptx-editor.dev/core.
Load the stylesheet before you mount an editor, and give the editor's parent a measured height.
The editor runs in the browser. On Next.js, load it with dynamic() and ssr: false. See Next.js.
Import components, hooks, and font helpers from the package root. The stylesheet is the only other export.
Review, collaboration, and the glow, inner shadow, reflection, soft edge, blur, and 3-D effects come from @pptx-editor.dev/pro under the EigenPal Pro License.

Next steps

React props: configure <PptxEditor>.
React composition: arrange the parts yourself.
React hooks: connect your own controls.