React examples

Choose an example

Run a command

Render this component inside PptxEditor.Root. It adds a slide with the typed addSlide command and shows the engine's refusal reason:

import { useState } from 'react';
import { useEditorState, usePptxEditor } from '@pptx-editor.dev/react';

export function AddSlideButton() {
  const editor = usePptxEditor();
  const editable = useEditorState((s) => s.status === 'ready' && s.mode === 'edit');
  const [error, setError] = useState<string | null>(null);

  function add() {
    if (!editor) return;
    const result = editor.exec({ type: 'addSlide' });
    setError(result.ok ? null : result.reason);
  }

  return (
    <>
      <button type="button" disabled={!editable} onClick={add}>
        New slide
      </button>
      <output aria-live="polite">{error}</output>
    </>
  );
}

exec returns a CommandResult: ok is false with a reason when the engine refuses the command. Commands that change the presentation normally create an undo step. No-op commands add none; history groups and consecutive nudges can combine edits. See Undo and history groups. For a control that a toolbar slot already describes, prefer useEditorCommand(slot); see React hooks.

Run the React examples

The repository has two React applications:

Run bun install at the repository root first. The Vite example builds against the package source and needs no build step. The Next.js example uses the built packages, so run bun run build:packages first.

Limits

• Render command components inside PptxEditor.Root. Wait for usePptxEditor() to return the instance before you call it.
• save() returns null when no deck is open. Your application owns any download or upload of the saved bytes.
• The editor makes no network request of its own. Your application fetches the deck and passes its bytes.

Next steps

• React props: configure <PptxEditor> and its ref.
• Toolbar: find command slot identifiers.
• Next.js: set up the editor in the App Router.