Overview

Customize your PPTX editor to fit your application. Each guide lists the supported options and shows React and Vue reference code. Start with props and CSS, then compose parts when you need a different layout.

Live examples

The demo app in examples/vite/ composes these parts into a complete editor. In a checkout of the repository, run bun install and bun run dev, then open http://localhost:5274/.

Design principles

The PPTX editor separates presentation editing from interface controls. Every part reads the same editor state and runs the same commands as the packaged editor.

Start with the smallest change that fits your application:

• Appearance: Set --doc-* CSS properties on .acme-theme .pptx-editor, where .acme-theme is a wrapper around PptxEditor.Root. Use className and data-active or data-disabled to style controls. Set colorMode for dark controls.
• Composition: Use PptxEditor.Root, .Viewport, .Content, and the panes to arrange the interface. Keep every part inside Root.
• Individual controls: Use named parts such as PptxEditor.Toolbar.Bold. Replace an icon with icon, or supply your own element with asChild.
• Control sets: Override a slot in place, use hidden to remove it, or set preset={false} to compose the toolbar, a menu, or a dialog yourself.
• Custom behavior: Use useEditorCommand(slotId) for command state and execution. Use useEditorState(selector) for the state your control shows.

Keep the slide selection when you build custom controls: a chrome mousedown calls preventDefault(), except on inputs, selects, and text areas. Keep labels, keyboard support, and disabled reasons accessible. A disabled control stays focusable with aria-disabled and tells the user why it is disabled.

Hiding a control changes the interface only. The operation keeps working from menus, keyboard shortcuts, and the API.

Customization guides

Choose the API level

React and Vue reference

Compose the same workspace in either adapter:

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

export function DeckEditor({ bytes }: { bytes: Uint8Array }) {
  return (
    <div className="acme-theme">
      <PptxEditor.Root document={bytes} colorMode="system">
        <PptxEditor.Viewport className="deck-workspace">
          <PptxEditor.Menu />
          <div className="deck-workspace__dock">
            <PptxEditor.Toolbar />
          </div>
          <div className="deck-workspace__body">
            <PptxEditor.SlideRail />
            <div className="deck-workspace__main">
              <PptxEditor.Content />
              <PptxEditor.FindBar />
              <PptxEditor.EditNotice />
              <PptxEditor.FontNotice />
              <PptxEditor.NotesPane />
              <PptxEditor.ZoomPill />
            </div>
          </div>
          <PptxEditor.Slideshow />
        </PptxEditor.Viewport>
      </PptxEditor.Root>
    </div>
  );
}

<script setup lang="ts">
import {
  PptxEditorContent,
  PptxEditorEditNotice,
  PptxEditorFindBar,
  PptxEditorFontNotice,
  PptxEditorMenu,
  PptxEditorNotesPane,
  PptxEditorRoot,
  PptxEditorSlideRail,
  PptxEditorSlideshow,
  PptxEditorToolbar,
  PptxEditorViewport,
  PptxEditorZoomPill,
} from '@pptx-editor.dev/vue';
import '@pptx-editor.dev/core/styles/editor.css';

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

<template>
  <div class="acme-theme">
    <PptxEditorRoot :document="bytes" color-mode="system">
      <PptxEditorViewport class="deck-workspace">
        <PptxEditorMenu />
        <div class="deck-workspace__dock">
          <PptxEditorToolbar />
        </div>
        <div class="deck-workspace__body">
          <PptxEditorSlideRail />
          <div class="deck-workspace__main">
            <PptxEditorContent />
            <PptxEditorFindBar />
            <PptxEditorEditNotice />
            <PptxEditorFontNotice />
            <PptxEditorNotesPane />
            <PptxEditorZoomPill />
          </div>
        </div>
        <PptxEditorSlideshow />
      </PptxEditorViewport>
    </PptxEditorRoot>
  </div>
</template>

The deck-workspace classes are your own layout CSS. Workspace layout lists it.

The adapters expose the same editing commands and components. Vue uses named exports such as PptxEditorToolbar for React's PptxEditor.Toolbar.

More control

See the API reports for @pptx-editor.dev/react and @pptx-editor.dev/vue for every part and type.

See also

• React composition
• Vue composition
• Layout