Installation

Install an adapter for your framework and one shared engine. Use the same package versions throughout your application.

Install packages

Install one adapter and the engine. Each adapter declares @pptx-editor.dev/core as a peer dependency, and it installs the shared strings (@pptx-editor.dev/i18n) for you.

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

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

Install one copy of @pptx-editor.dev/core. The text shaper and its measurement caches belong to that copy, so two copies in one bundle measure text separately.

Install all @pptx-editor.dev packages at the same minor version. Each package accepts only the minor of @pptx-editor.dev/core that it releases with, for example ~0.1.0.

Choose a framework setup

Use Vite for React, Vite with Vue for Vue, or Next.js for the App Router.

These guides show where to import styles and how to load the editor on the client.

Check runtime requirements

The editor runs in the browser. It needs the FontFace API and WebAssembly for text shaping, and Intl.Segmenter for caret steps and word boundaries (Chrome 87, Safari 14.1, Firefox 125, or later). On a runtime without Intl.Segmenter, the import of @pptx-editor.dev/core throws an error that names it.

Add styles and a container

Import the stylesheet once. It holds every chrome style and the --doc-* tokens. Each adapter also exports it as styles.css. Import it after your app's CSS reset.

import '@pptx-editor.dev/core/styles/editor.css';

The default editor fills the height of its parent, so give the parent a height:

<div style={{ height: '100vh' }}>
  <PptxEditor document={bytes} />
</div>

To theme the chrome, see Appearance. The slides always show the deck's own colors.

Embed in a page

The editor shares the page with your app:

• Every rule in the stylesheet selects a pptx- class first. The rules do not style elements outside the editor.
• The editor chrome sets the styles it needs. A CSS reset in your app, such as Tailwind preflight, does not change it.
• Menus, popovers, and tooltips open at their controls in a container with a transform, filter, or scale. A drawer or a sheet is an example.
• In a container that clips its overflow, menus stay in the visible part of the container.
• Ctrl/Cmd+F and Ctrl/Cmd+H open the find bar when the focus or the last click is in the editor. Before the first click, and after a click elsewhere, the browser keeps these shortcuts.
• More than one editor can be on a page. Each editor opens its own popups.

Keep the menu bar and the toolbar inside the viewport (PptxEditor.Viewport in React, PptxEditorViewport in Vue). Their menus then get the editor tokens, and the link popup opens at the menu bar.

Your own content inside the viewport keeps your styles. It gets only the editor's text styles, box sizing, and focus ring. Content inside an editor part, such as a custom toolbar control, also gets the chrome defaults. These defaults set margins, lists, and controls. To change the chrome text styles, set them on .pptx-editor after the editor stylesheet.

The slide show asks the browser for full screen. In an iframe, add allow="fullscreen". Without full screen, the slide show fills only a transformed container around the editor.

The page around the editor needs a lang, a <title>, one <main>, a heading, and labels for your own controls. See Accessibility.

Set up your bundler

The engine shapes text with HarfBuzz and loads harfbuzz.wasm from new URL(..., import.meta.url).

• Vite, webpack, and Turbopack emit the file. They need no configuration.
• Bun and esbuild do not emit it. Serve @pptx-editor.dev/core/harfbuzz.wasm as a static file, and point the shaper at it before you create the first editor:

import { setHarfBuzzWasmUrl } from '@pptx-editor.dev/core/layout';

setHarfBuzzWasmUrl('/static/harfbuzz.wasm');

Choose fonts

Without other setup, the editor measures with the deck's embedded fonts, then with the metric-compatible substitutes of @docx-editor.dev/fonts, and it makes no network request. To supply your own faces, see Fonts.

Next steps

• Quickstart: open and save a deck.
• Customization: change the toolbar, menus, dialogs, and appearance.
• Accessibility: prepare the host page, and check the keyboard and screen reader support.