Props

Configure the editor

This example loads .pptx bytes, keeps the instance, and saves the edited deck:

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

export function DeckEditor({
  bytes,
  upload,
}: {
  bytes: Uint8Array;
  upload: (bytes: Uint8Array) => Promise<void>;
}) {
  const [editor, setEditor] = useState<PptxEditorInstance | null>(null);

  async function save() {
    const saved = editor?.save();
    if (saved) await upload(saved);
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
      <button onClick={save} disabled={!editor}>
        Save
      </button>
      <div style={{ flex: 1, minHeight: 0 }}>
        <PptxEditor document={bytes} mode="edit" onReady={setEditor} />
      </div>
    </div>
  );
}

For generated signatures, see docs/api/react/index.api.md in the repository.

Set props

Document

Fonts

Without fonts, the editor measures with the deck's embedded fonts and then the packaged substitutes, and it fetches nothing. See Fonts.

Capability modules

Create the list once, outside the component, so each render passes the same modules:

import { PptxEditor } from '@pptx-editor.dev/react';
import { reviewModule } from '@pptx-editor.dev/pro';

const modules = [reviewModule()];

export function ReviewedDeck({ bytes }: { bytes: Uint8Array }) {
  return <PptxEditor document={bytes} modules={modules} />;
}

@pptx-editor.dev/pro is under the EigenPal Pro License. To use other modules after mount, change the key of PptxEditor to create a new editor.

Appearance and language

Packaged parts

Set a part to false to hide it, or pass its props object to configure it.

A popups.contextMenu or popups.hyperlink entry takes precedence over the corresponding part prop. Hiding a control does not disable its editing command. For examples, see Change one part of the packaged editor.

Chrome

Handle callbacks

Use the instance from onReady for actions and one-time reads:

Use the ref

<PptxEditor> and PptxEditor.Root take a ref to a PptxEditorRef. Use it to reach the editor from a parent component:

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

export function DeckEditor({
  bytes,
  upload,
}: {
  bytes: Uint8Array;
  upload: (bytes: Uint8Array) => Promise<void>;
}) {
  const editorRef = useRef<PptxEditorRef>(null);

  async function save() {
    const saved = editorRef.current?.save();
    if (saved) await upload(saved);
  }

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
      <button onClick={save}>Save</button>
      <div style={{ flex: 1, minHeight: 0 }}>
        <PptxEditor ref={editorRef} document={bytes} />
      </div>
    </div>
  );
}

Every method is safe before the editor mounts: load and exec refuse with disabled.noEditor, save and getEditor return null, focus does nothing, and snapshot returns an empty snapshot. Everything else is on the instance that getEditor() returns.

Limits

• onReady runs once for each instance. A new document reuses the instance, so onReady does not run again.
• save() returns the bytes only. Your application owns any download or upload.
• modules applies when the instance is created. To change it, remount with a different key.
• locale follows the content of the catalog, not its identity, so an inline object does not reload the strings on each render.
• popups entries set to false turn off that dialog's interface. The operation stays available to the API.

Next steps

• React hooks: read state and run commands from your controls.
• React composition: build your own layout.
• React examples: run the example applications.