` that names the page. - One `<main>` landmark that contains the editor. - A page heading (`<h1>`). The heading can be visually hidden. - A label for each control of your own, such as the file input that opens a deck. - A `title` and `allow="fullscreen"` on an `<iframe>` that holds the editor. The slide show asks for full screen (see [Installation](/docs/0.x/installation#embed-in-a-page)). Use this host page structure: ```html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Quarterly review

` is inside the viewport, set `label={false}` on `PptxEditor.Viewport` (`:label="false"` in Vue). The viewport then adds no region, and your landmarks stay at the top level. To change the region name, give `label` a text or a translation key. The demos in `examples/` follow these rules. The [quickstart](/docs/0.x/quickstart) shows the `

` landmark and the file input label. If you build your own controls, keep them accessible. A disabled control stays focusable with `aria-disabled` and tells the user why it is off. See [Customization](/docs/0.x/customization). ## Use the keyboard The editor follows the WAI-ARIA authoring practices. Each composite part, such as the slide, the toolbar, or the slide list, is one Tab stop. The arrow keys move inside it. The chrome shows a focus ring on keyboard focus. ### On the slide The slide is one Tab stop (role `group`). When the slide has focus, these keys apply: | Key | Action | | --- | --- | | Tab, Shift+Tab | Select the next or the previous shape, in z-order. With no selection, Tab selects the backmost shape and Shift+Tab the frontmost. | | Tab on the last shape, Shift+Tab on the first | Clear the selection and move focus out of the slide. The slide never traps focus. | | Enter or F2 | Start to edit the text of the selected shape, with all of its text selected. On a group, Enter selects the shapes in the group. | | A character key | Start to edit the text of the selected shape, and type that character at the end of its text (in the editing mode only). | | Escape | Leave text editing and select the shape. Leave a group and select the group. Otherwise, clear the selection. | | Arrow keys | Nudge the selected shapes by 8 px. Ctrl/Cmd+arrow nudges by 1 px. Shift multiplies the step by 10. | | Delete, Backspace | Delete the selected shapes. | | Ctrl/Cmd+D | Duplicate the selected shapes. | | Ctrl/Cmd+A | Select all shapes, or all text when you edit text. | Inside a group, Tab and Shift+Tab cycle through the shapes of the group. While you edit text, Tab and Shift+Tab change the list level at the start of a list item or across paragraphs. Elsewhere, both keys insert a tab. Enter starts a new item at the same level, also on an empty item. Backspace at the start of a list item removes its bullet or number and keeps its level. The next Backspace joins it to the previous paragraph. Press Escape first to move with Tab again. In a table cell, Tab and Shift+Tab move to the next or the previous cell. See [Tables](/docs/0.x/guides/tables). ### While you edit text | Key | Action | | --- | --- | | Ctrl/Cmd+B, I, U | Bold, italic, underline. | | Ctrl/Cmd+L, E, R, J | Align the paragraph left, center, right, or justified. On selected shapes, align all of their text. | | Ctrl/Cmd+Shift+>, Ctrl/Cmd+Shift+< | The next larger or smaller font size. On selected shapes, all of their text. | | Ctrl/Cmd+], Ctrl/Cmd+[ | Move the paragraph one list level down or up. | | Shift+F3 | Change the case of the selection or of the word at the caret: Capitalize Each Word, UPPER CASE, lower case. | | Ctrl/Cmd+=, Ctrl/Cmd+Shift+= | Subscript, superscript. | | Ctrl/Cmd+\ | Clear the character formatting. | | Ctrl/Cmd+Shift+C, Ctrl/Cmd+Shift+V | Copy and paste the formatting. | | Alt/Ctrl+Left, Alt/Ctrl+Right | Move to the start of the previous word or of the next word. Add Shift to select. | | Alt/Ctrl+Up, Alt/Ctrl+Down | Move to the start of the paragraph, or of the next paragraph. | | Cmd+Up, Cmd+Down, Ctrl/Cmd+Home, Ctrl/Cmd+End | Move to the start or the end of the text. | | Alt/Ctrl+Backspace, Cmd+Backspace | Delete the word before the caret. | | Shift+Enter | Start a new line in the same paragraph. | In right-to-left and mixed-direction text, Left and Right move the caret one place on screen, not in reading order. Alt/Ctrl+Left and Alt/Ctrl+Right move past one word on screen. Cmd+Left and Cmd+Right move to the left or the right edge of the line. Home and End move to the start and the end of the line in reading order, wherever they show on screen. A selection holds the text between its two ends in reading order, so on a mixed-direction line it can show as several highlighted parts. The editor makes no automatic capitals, curly quotes, dashes, or spelling corrections of its own. Mobile keyboards, and systems and browsers that offer such changes, apply them. The editor replaces the text that each change targets. Undo removes the change, together with any text you type right after it. Browser spelling tools and browser extensions that write to the text input change the document in the same way as typing. Many desktop browsers offer no such changes. In those browsers, the editor adds no curly quotes or capitals while you type. AutoCorrect still makes these changes: - `(c)`, `(r)`, and `(tm)` become ©, ®, and ™. - `...` becomes …, and `1/2`, `1/4`, and `3/4` become fractions. - `1.`, `1)`, `*`, or `-` and a space at the start of a paragraph start a numbered or bulleted list. Press Backspace or Ctrl/Cmd+Z right after to keep the typed text. To turn AutoCorrect off, pass `autoCorrect: false` to `createPptxEditor`, set `autoCorrect={false}` on the React editor, or set `:auto-correct="false"` on the Vue editor. This option does not change the system replacements. In the speaker notes field, Ctrl/Cmd+B, I, and U format the text. The other keys in this table and AutoCorrect apply on the slide only. ### Toolbar, menus, and dialogs - The toolbar is one Tab stop. The Left and Right arrow keys, Home, and End move through its controls. In a right-to-left interface, Left and Right change places. - The ribbon tabs are a `tablist`. The Left and Right arrow keys, Home, and End move between tabs. - The menu bar is one Tab stop. Escape closes a menu and keeps focus on its menu bar item. - A popover, such as a color or font picker, returns focus to its trigger on Escape. - A context menu returns focus to where it was on Escape. Shift+F10 and the context menu key open it from the keyboard. - A dialog keeps Tab inside it. Escape closes it, and focus goes back to the control that opened it. ### Slide list and slide sorter The slide list in the rail is one Tab stop. The focused slide is the current slide. | Key | Action | | ------------------------------------------- | ------------------------------------- | | Up, Down (Left, Right in a horizontal rail) | Go to the previous or the next slide. | | Home, End | Go to the first or the last slide. | | Shift+arrow, Shift+Home, Shift+End | Extend the slide selection. | | Ctrl/Cmd+arrow | Move the selected slides. | | Enter, Ctrl+M | Add a slide. | | Delete, Backspace | Delete the selected slides. | | Ctrl/Cmd+D | Duplicate the selected slides. | | Shift+F10, context menu key | Open the slide menu. | In the viewing mode, the slide list keys that change the deck do nothing, and the editor tells why. With sections, the list is a tree: the arrow keys also stop on each section header. Home and End go to the first and the last row, which can be a section header. The slide sorter is one Tab stop. The arrow keys move through the grid of slides. Home and End go to the start and the end of the grid. Enter opens the focused slide. Shift+arrow, Ctrl/Cmd+arrow, Delete, Ctrl/Cmd+D, Ctrl+M, and Shift+F10 work as in the slide list. ### Slide show F5 starts the show from the first slide that is not hidden. Shift+F5 starts it from the current slide. | Key | Action | | --------------------------------------- | ------------------------------ | | Right, Down, Page Down, Space, N, Enter | Next slide | | Left, Up, Page Up, Backspace, P | Previous slide | | Home, End | First or last slide | | A number, then Enter | Go to that slide | | B or `.`, W or `,` | Show a black or a white screen | | Escape | End the show | Tab moves through the buttons of the slide show control bar. ## Hear the editor with a screen reader The editor takes its accessible names from the locale catalog, so they change with the [language](/docs/0.x/customization/language). With the English catalog, a screen reader hears these items: | Where | What the screen reader hears | | --- | --- | | Editor | A region "Presentation editor" that holds the chrome and the slide. | | Slide | The group name "Slide 3 of 12". The name changes when the slide changes. Inside it, the slide text and an image for each picture that has alt text. The image name is the alt text. A decorative picture, or a picture with no alt text, is hidden. | | Shape selection | A polite announcement with the kind and the name of the shape, for example "Shape Title 1, selected". For a picture with alt text, the alt text comes after the name: "Picture Logo, A green leaf, selected". It comes when Tab or a click selects one shape. | | Text editing | The text input "Text of the selected shape", with the description "Shows the text of the current paragraph up to the caret". Its value is that text. | | Table cell | A polite announcement, "Row 2, column 3", when the caret moves to a cell. | | Link in the text | A polite announcement, "Link: https://example.com. Press F6 for its actions." F6 moves focus to the link actions. | | Slide list | A navigation region "Slides" with a list box "Slides". With sections, the list is a tree. Items are "Slide 4", or "Slide 4 (hidden)" for a hidden slide. | | Speaker notes | A region "Speaker notes", with a multiline text box. | | Status bar | A polite announcement, "Slide 3 of 12", when the slide changes. | | Slide show | A modal dialog "Slide show" with the slide text and the picture alt text of the current slide. A polite announcement gives the position, "Slide 3 of 12", at each slide. When you type a number, a status message says "Go to slide 5". | ## Color modes and motion - **Color modes.** Set `colorMode` to `light`, `dark`, or `system`. `system` follows the operating system and updates when it changes. Only the chrome changes. The slide always shows the colors of the file. See [Appearance](/docs/0.x/customization/appearance). - **Reduced motion.** When the operating system asks for reduced motion, the editor stops the loading spinner, the tooltip animation, the press effect of buttons, the slide-in of notices, and the transition of the slide show control bar. - **Forced colors.** In a forced colors (high contrast) mode, the chrome uses the system colors. Selection, pressed and checked controls, focus rings, and disabled controls stay visible. The slide keeps the colors of the file. See [Appearance](/docs/0.x/customization/appearance). - **Slide show motion.** The slide show does not play the animations and transitions of the file. They stay in the file on save. The **Animations** tab of the side panel lists the effects of a slide as text, in play order. ## Known limits These limits apply: - **Alt text of other objects.** Only pictures give their alt text to a screen reader on the slide. Charts, groups, and shapes do not. A picture with a title but no alt text is hidden. - **Text input value.** While you edit text, the text input holds only the paragraph text up to the caret, at most about 200 characters. A screen reader does not read the text after the caret from the input. - **Slide content structure.** The slide is drawn as SVG. A screen reader gets the slide text only as flat text, in z-order. It gets no headings, lists, or reading order. It gets the shape name only when a shape is selected. When more than one shape is selected, it hears no announcement. ## Next steps - [Installation](/docs/0.x/installation): requirements, styles, and how to embed the editor. - [Customization](/docs/0.x/customization): build controls that keep labels and keyboard support. - [Language](/docs/0.x/customization/language): translate the interface and its accessible names. --- # @pptx-editor.dev/core Source: https://www.pptx-editor.dev/docs/0.x/core Core provides the PPTX engine and browser editor. React and Vue add interface components around the same editor contract. ## Install Install the package directly when your application imports its APIs: ```bash npm install @pptx-editor.dev/core ``` Keep one resolved copy of core in your application. The adapters use it as a peer dependency. ## Create an editor This browser helper mounts an editor into an existing element. It returns the instance for your controls and cleanup: ```ts import { createPptxEditor } from '@pptx-editor.dev/core/editor'; import '@pptx-editor.dev/core/styles/editor.css'; export async function mountPresentation(container: HTMLElement, bytes: Uint8Array) { const editor = createPptxEditor({ zoom: 'fit' }); container.classList.add('pptx-editor'); try { editor.attach(container); const result = await editor.load(bytes); if (!result.ok) throw new Error(result.reason); return editor; } catch (error) { editor.destroy(); throw error; } } ``` Give the container a height and available width. Call `editor.destroy()` when your application removes this editor permanently. The core editor does not add a toolbar, slide rail, or menus. Use the adapters for those components. ## Choose an import Use the editor entry point for browser integration. Other entry points expose the engine layers: | Entry point | Use | | ----------------------------------------- | ---------------------------------------------------- | | `@pptx-editor.dev/core` | Editor exports. | | `@pptx-editor.dev/core/editor` | Editor creation, commands, fonts, and image exports. | | `@pptx-editor.dev/core/contracts` | Shared editor, snapshot, and command types. | | `@pptx-editor.dev/core/store` | Package read/write and document transactions. | | `@pptx-editor.dev/core/cascade` | Slide inheritance and theme resolution. | | `@pptx-editor.dev/core/layout` | Geometry and text layout without the DOM. | | `@pptx-editor.dev/core/output` | SVG paint from layout records. | | `@pptx-editor.dev/core/automation` | Automation hosts. | | `@pptx-editor.dev/core/styles/editor.css` | Editor styles. | For server-side document editing, start with the [Editing API](/docs/0.x/editor-api). ## Read state and run commands Use `snapshot()` for state and `exec()` for edits. This helper adds a slide when the command is available: ```ts import type { Editor } from '@pptx-editor.dev/core/contracts'; export function addSlide(editor: Editor) { const command = { type: 'addSlide' } as const; const allowed = editor.can(command); if (!allowed.ok) return allowed; return editor.exec(command); } ``` Check the final result even after `can()`. Commands can be refused when their target is unavailable. For a large target, `can()` makes a shorter check. On a selection of more than 250 shapes, the commands that arrange shapes (`order`, `alignObjects`, `distributeObjects`, `flipObjects`, `duplicate`, `delete`, `group`, and `ungroup`) get a check of the editing mode only, and their argument is not checked. Other commands are checked on the first 250 shapes, and a refusal there gets the full check. A command that passes on the first 250 shapes can still be refused by `exec()`. The `duplicate` command also counts a selection of more than 20,000 XML nodes as large, and the `applyLayout` and `resetSlides` commands a named slide of more than 20,000 XML nodes. The `addSlide` and `addSection` commands always get the full check. While you type, the formatting answers of the text box hold until 300 ms after the last key. `exec()` makes the full check and returns the refusal reason. | Member | Purpose | | ------------------------------ | ------------------------------------------------------- | | `snapshot()` | Read the presentation and local view state. | | `subscribe(listener)` | Observe state changes; returns an unsubscribe function. | | `can(command)` | Check whether a command can run. | | `exec(command)` | Run a command and inspect its result. | | `load(bytes, options?)` | Open a presentation asynchronously. | | `save()` | Return PPTX bytes synchronously, or `null`. | | `attach(element)` / `detach()` | Mount or remove the surface. | | `destroy()` | Release the editor and its resources. | ## Choose an event Use `onEditorEvent(editor, name, handler)` to observe a specific change. It returns an unsubscribe function. | Event | Payload and trigger | | ----------------- | -------------------------------------------------------------------------- | | `change` | Snapshot after an edit, completed or failed load, or read-only transition. | | `selectionChange` | Snapshot after selection, current slide, or pending slide count changes. | | `rejection` | Refused edit and its snapshot. | | `openFailure` | Refused file and its snapshot. | Use `subscribe()` when you also need zoom or other view changes. Dispose every subscription when its consumer unmounts. ## See also - [Editor mount modes](/docs/0.x/core/mount-modes) - [Engine architecture](/docs/0.x/core/architecture) - [Load and save presentations](/docs/0.x/guides/loading-and-saving) --- # Engine architecture Source: https://www.pptx-editor.dev/docs/0.x/core/architecture One document store holds the presentation. The browser editor, adapters, and automation hosts apply edits through that store. ## Follow a presentation The engine reads PPTX bytes into an Open Packaging Conventions (OPC) package. It resolves slide inheritance before laying out shapes and text: ```mermaid flowchart LR Bytes[PPTX bytes] --> Store[Document store] Store --> Cascade[Slide inheritance and theme] Cascade --> Layout[Geometry and text layout] Layout --> Paint[SVG paint] Store --> Saved[Saved PPTX bytes] Commands[Editor commands] --> Store ``` Parsing, inheritance resolution, and layout do not depend on the DOM. Browser painting consumes layout records rather than calculating a separate layout. ## Choose the right layer Use editor commands for interactive features. Use the [Editing API](/docs/0.x/editor-api) for batch automation on a server or live editor. Use lower-level store APIs only when you need package-level integration. Write document changes through `PptxDocumentStore` operations. Editing the rendered DOM does not change the presentation. React and Vue read snapshots and dispatch commands. They do not keep a separate editable document model. ## Preserve document content The package model retains content that the editor does not interpret. Rendering and editing support are distinct from preservation during save. Consult [PPTX fidelity](/docs/0.x/pptx-fidelity) for feature-level evidence and rendering limits. Do not infer edit support from visible content alone. ## Use consistent fonts Text layout uses font metrics. Configure fonts before comparing browser output with PDF output. Missing or substituted fonts can change line breaks and shape text. For host font loading, see [Fonts](/docs/0.x/customization/fonts). For server output, see [PDF export](/docs/0.x/export/pdf). ## See also - [Core](/docs/0.x/core) - [Editing API](/docs/0.x/editor-api) - [PPTX fidelity](/docs/0.x/pptx-fidelity) --- # Editor mount modes Source: https://www.pptx-editor.dev/docs/0.x/core/mount-modes Create one editor per presentation session. Mount its surface with `attach(element)` and remove it with `detach()`. ## Move between containers `attach()` creates the surface in the supplied element. A second call replaces the previous surface: ```ts import type { Editor } from '@pptx-editor.dev/core/contracts'; export function moveEditor(editor: Editor, destination: HTMLElement) { editor.detach(); destination.classList.add('pptx-editor'); editor.attach(destination); editor.focus(); } ``` Detaching removes the surface. It keeps the document, selection state, and undo history in the editor instance. Use this pattern for containers in the same browser document. Do not assume that an iframe or another window has the same behavior. ## Keep the container sized Put `class="pptx-editor"` on the mount element or an ancestor to scope editor styles. Give the mount element an explicit size. For example, use this CSS with a host element whose class is `presentation-surface`: ```css .presentation-surface { width: 100%; height: 600px; min-width: 0; overflow: auto; } ``` Call `setZoom('fit')` to follow the available space. The React and Vue viewport components provide the adapter layout classes. ## Dispose thumbnail containers `renderThumbnail()` paints a slide and returns a disposer. Request deferred paint for a long slide list: ```ts import type { Editor } from '@pptx-editor.dev/core/contracts'; export function mountThumbnail(editor: Editor, slideIndex: number, container: HTMLElement) { return editor.renderThumbnail(slideIndex, container, { defer: true }); } ``` Call the returned function when you remove the thumbnail. Without `defer`, its first paint is synchronous. ## End the session Call `destroy()` when the editor is no longer needed. Dispose application subscriptions and thumbnail registrations with their owners. Adapters own their editor lifecycle. Do not destroy an adapter-owned instance from a child control. ## See also - [Core](/docs/0.x/core) - [Layout](/docs/0.x/customization/layout) - [Long decks](/docs/0.x/guides/long-decks) --- # Overview Source: https://www.pptx-editor.dev/docs/0.x/customization 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/`](https://github.com/eigenpal/pptx-editor/tree/main/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 Set interface colors, spacing, and dark mode. Place the toolbar, the menu bar, the slide rail, the notes, and panels. Choose controls, replace icons, and add your own buttons. Use tabs and contextual tabs, and change each tab with toolbar parts. Choose menu bar and context menu rows. Replace dialog parts, and keep draft state, validation, and focus. Load font bytes, choose font sources, and replace fonts in place. Translate the interface with a locale catalog, and translate your own controls. ## Choose the API level | Level | Use | | --- | --- | | Props and CSS tokens | Change labels, colors, and color mode. | | Named parts | Arrange controls and replace selected elements. | | Hooks and composables | Connect application controls to editor state and commands. | | Modules | Add review, collaboration, or drawing effects (glow, inner shadow, reflection, soft edge) with [`@pptx-editor.dev/pro`](https://www.npmjs.com/package/@pptx-editor.dev/pro) (EigenPal Pro License). Pass them in the `modules` prop of `PptxEditor` or its root; the editor reads it once, when it is created. See [Capability modules](/docs/0.x/react/props#capability-modules) for an example. | ## React and Vue reference Compose the same workspace in either adapter: #### React ```tsx import { PptxEditor } from '@pptx-editor.dev/react'; import '@pptx-editor.dev/core/styles/editor.css'; export function DeckEditor({ bytes }: { bytes: Uint8Array }) { return (

); } ``` #### Vue ```vue ``` The `deck-workspace` classes are your own layout CSS. [Workspace layout](/docs/0.x/customization/layout#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`](https://github.com/eigenpal/pptx-editor/blob/main/docs/api/react/index.api.md) and [`@pptx-editor.dev/vue`](https://github.com/eigenpal/pptx-editor/blob/main/docs/api/vue/index.api.md) for every part and type. ## See also - [React composition](/docs/0.x/react/composition) - [Vue composition](/docs/0.x/vue/composition) - [Layout](/docs/0.x/customization/layout) --- # Appearance Source: https://www.pptx-editor.dev/docs/0.x/customization/appearance Put a theme class on a wrapper around `PptxEditor.Root`, and set `--doc-*` properties on `.acme-theme .pptx-editor`. Each `.pptx-editor` scope declares its own defaults, so a property set on the wrapper alone does not reach the chrome. Load your CSS after the editor stylesheet. Set `colorMode` on `PptxEditor.Root` for dark controls. Only the chrome changes: the slide keeps the colors that the file defines, in both modes. ## Apply an application color theme PPTX Editor uses the same `--doc-*` token names as DOCX Editor, so one override themes both products. Put your theme class on an element around `PptxEditor.Root`, and scope the tokens to every `.pptx-editor` inside it. Dialogs render outside `PptxEditor.Viewport` with their own `.pptx-editor` scope, so a rule on the viewport alone does not reach them. ```css .acme-theme .pptx-editor, .acme-theme .pptx-editor.dark { --doc-primary: var(--app-brand); --doc-primary-light: var(--app-brand-surface); --doc-on-primary: var(--app-on-brand); --doc-focus-ring: var(--app-focus-ring); } ``` Define light and dark application values for the mapped tokens. The shared rule keeps both editor themes connected to your application's active palette. ## Style your controls Keep CSS under your wrapper class. These tokens and selectors work in both frameworks. ```css .acme-theme .pptx-editor { --doc-font-ui: 'Inter', system-ui, sans-serif; --doc-radius-surface: 16px; --doc-radius-control: 8px; --doc-dialog-radius: 16px; --doc-dialog-padding: 24px; } .acme-theme .pptx-toolbar__button[data-active] { background: var(--doc-primary-light); } .acme-theme .pptx-toolbar__button[data-disabled] { opacity: 0.5; } ``` A part that you build yourself gets the tokens from the `.pptx-editor` scope. Inside `PptxEditor.Viewport`, the viewport gives that scope. Outside the viewport, put the classes from `useScopeClassName()` on the root element of your part. The hook returns `''` inside the viewport, and `'pptx-editor '` or `'pptx-editor dark '` outside it: ```tsx import { useScopeClassName } from '@pptx-editor.dev/react'; export function AcmePanel() { return

; } ``` In Vue, `useScopeClassName()` returns a computed ref. A part that you portal to `document.body` is outside the viewport in the page, so add `pptx-editor` to it yourself, with `useEditorColorMode()` for the theme. To style one dialog, pass a class through its `popups` renderer. The class goes on the dialog element, beside `.pptx-dialog`: ```tsx import { PptxEditor, type PptxEditorPopups } from '@pptx-editor.dev/react'; const popups: PptxEditorPopups = { pageSetup: (props) => , }; ``` ## Appearance options | Area | Configuration | Scope | | --- | --- | --- | | Interface palette | Override `--doc-*` properties on `.acme-theme .pptx-editor`. | Toolbar, menus, panes, dialogs, and notices. | | Utility palette | `--foreground` and `--radius`. | The light active toggle and the slide show controls. | | Dark mode | Set `colorMode` on `PptxEditor.Root`: `light` (default), `dark`, or `system`. | The chrome, not the slide. | | Typography | `--doc-font-ui` and the dialog font properties. | The whole chrome: toolbar, menus, panes, notes, and dialogs. Not slide fonts. | | Corner radius | `--doc-radius-surface`, `--doc-radius-control`, `--doc-radius-pill`, and the dialog radius properties. | Cards, controls, pills, and dialogs. | | Control shape | Add `className` to named parts. | The selected part and its interaction states. | | Custom elements | Use a supported part's `asChild`. | Your element receives the part's behavior. | | Slide appearance | Use the deck's theme, layouts, and formatting commands. | Slide content and saved formatting. | ### Interface palette reference Set CSS color values for these properties. Override related foreground and background properties together. The default stylesheet defines separate light and dark palettes. This table lists only the properties that a PPTX Editor rule reads. | Purpose | Properties | | --- | --- | | Main surfaces | `--doc-surface`, `--doc-popover-bg`, `--doc-bg` (the workspace behind the slide) | | Hover and input surfaces | `--doc-bg-hover` (also the hovered or open font family field), `--doc-bg-input` | | Primary actions | `--doc-primary`, `--doc-primary-hover` (the hovered primary dialog button), `--doc-primary-light`, `--doc-on-primary` | | Active toggles | `--doc-toggle-active-bg`, `--doc-toggle-active-fg` | | Text and icons | `--doc-text`, `--doc-popover-fg`, `--doc-text-muted`, `--doc-text-subtle` (disabled icons) | | Tooltips | `--doc-tooltip-bg`, `--doc-tooltip-text` | | Borders | `--doc-border`, `--doc-border-dark` | | Errors | `--doc-error`, `--doc-error-bg` | | Warnings | `--doc-warning`, `--doc-warning-bg`, `--doc-warning-text` | | Focus and selection | `--doc-focus-ring`, `--doc-selection`, `--doc-selection-mark` (the outlines, marquee, and handle edges of a selection on the slide) | | Caret and slide guides | `--doc-caret`, `--doc-smart-guide`, `--doc-cursor-format-paint` | | Collaboration accents | `--doc-accent` | | Behind the slide | `--doc-page-bg` (rail thumbnails), `--doc-page-bg-rendered` (the canvas stage) | | Overlay | `--doc-overlay` | | Complete shadow values | `--doc-card-shadow` (the toolbar, rail, notes, and dialogs), `--doc-card-shadow-strong` (menus and popovers), `--doc-shadow-lg` (tooltips) | | Slide show | `--doc-slideshow-bg`, `--doc-slideshow-black`, `--doc-slideshow-white`, `--doc-slideshow-text`, `--doc-slideshow-bar-bg`, `--doc-slideshow-bar-hover`, `--doc-slideshow-focus` | The shadow properties accept CSS `box-shadow` values. Tokens such as `--doc-bg-subtle` and `--doc-border-light` are defined, but do not affect the editor's built-in styles. ### Utility palette reference The stylesheet defines shadcn HSL properties. Only these two properties affect the built-in controls: | Property | Value type | Use | | --- | --- | --- | | `--foreground` | HSL components, such as `222.2 84% 4.9%` | The active toggle background in light mode (through `--doc-toggle-active-bg`). | | `--radius` | CSS length | The corner radius of the slide show controls. | Other names, such as `--primary` and `--ring`, do not affect the built-in controls. ### Size, typography, and layer reference | Property | Value type | Default or behavior | | --- | --- | --- | | `--doc-font-ui` | Font stack | The chrome font: the toolbar, menus, panes, notes, and dialogs. Falls back to the system font. Slide text keeps the deck's fonts. | | `--doc-dialog-font-family` | Font stack | Falls back to `--doc-font-ui`. | | `--doc-dialog-font-size` | CSS length | `13px`. | | `--doc-radius-surface` | CSS length | The corners of the floating cards: the toolbar, menus, the slide rail, the notes pane, the side panel, the find bar, and the notices. Each keeps its own value when unset: `10px` to `14px`. | | `--doc-radius-control` | CSS length | The corners of the controls inside them: buttons, fields, menu rows, tabs, the notes field, and tooltips. Each keeps its own value when unset: `6px` to `8px`. | | `--doc-radius-pill` | CSS length | The corners of the rounded pills: the zoom pill, its buttons and zoom level, and the chips in the side panel and dialogs. Defaults to `999px`, a full pill. | | `--doc-dialog-radius` | CSS length | Dialog panel. Falls back to `--doc-radius-surface`, then `12px`. | | `--doc-dialog-control-radius` | CSS length | Dialog buttons and fields. Falls back to `--doc-radius-control`, then `8px`. | | `--doc-dialog-padding` | One CSS length | Dialog inset: `24px`. | | `--doc-slide-padding` | One CSS length | The room around the slide in the canvas, on each side: `24px`. Zoom to fit keeps it. | | `--doc-z-overlay` | Integer | Menus and popovers: `50`. | | `--doc-z-context` | Integer | Context menus and submenus: `55`. | | `--doc-z-tooltip` | Integer | Chrome tooltips, above every other layer: `60`. | | `--doc-z-slideshow` | Integer | The slide show, when full screen is refused: `2147483000`. | Keep the layer order when you change these values. Some floating chrome uses fixed values: the zoom pill and the font notice use `25`, the edit notice `26`, and the find bar `30`. Keep `--doc-z-overlay` above `30`, so menus open above them. An ancestor's stacking context can still limit an editor overlay. ### Theme scope and interaction states `PptxEditor.Viewport` carries `.pptx-editor`. Menus, popovers, and context menus render inside the `.pptx-editor` element of the control that opens them, so keep the toolbar and the menu bar inside the viewport. Dialogs render outside the viewport and carry `.pptx-editor` on their own element. Scope your theme on an element around `PptxEditor.Root`, as in the example above, so both receive it. Add classes through component props instead of removing the library's classes. Toolbar buttons and menu rows carry `data-active` when a toggle is on, and `data-disabled` when the engine refuses the command. The slide rail and the notes pane carry `data-open="true"` or `data-open="false"`. A disabled control carries `aria-disabled="true"`, not the native `disabled` attribute. It stays focusable, runs nothing, and gives its reason to assistive technology, so do not hide it with `pointer-events: none` or `display: none`. Keep visible focus indicators and readable text in each theme. ### Dark mode behavior `colorMode="system"` follows the operating system and updates when it changes. With a dark mode, `PptxEditor.Viewport` and every dialog carry `dark` beside `.pptx-editor`. Declare dark overrides with `.acme-theme .pptx-editor.dark` after the editor stylesheet. Use `useEditorColorMode()` to style your own panels with the mode that `PptxEditor.Root` resolved. It returns `colorMode`, which is `light` or `dark`. Both adapters export the `ColorMode` type (`light`, `dark`, or `system`) and the `ResolvedColorMode` type (`light` or `dark`). In dark mode, the rail's slide numbers, the side panel tabs, and the notes placeholder meet a 4.5:1 contrast ratio. Keep that ratio when you override the dark tokens. Dark mode never changes the slide, and it never writes a color into the `.pptx` file. ### High contrast themes With a forced-colors theme (`@media (forced-colors: active)`), the browser replaces the chrome colors with system colors and removes shadows. The stylesheet then draws each state with system colors: - A selected slide in the rail and in the slide sorter, and the current layout tile, get a `Highlight` border inside the thumbnail. - Pressed toolbar toggles, the checked view switch option, selected tabs, and the hovered or focused menu row use `Highlight` with `HighlightText`. - Focus rings use `Highlight`. Disabled controls use `GrayText`, and a disabled pressed toggle gets a `GrayText` edge. - Menus, the find bar, the zoom pill, the tooltip, and the notes card get a `CanvasText` edge. - Color swatches and gradient previews keep their own colors (`forced-color-adjust: none`). If you override these states, use system colors in a `forced-colors` media query of your own. Each color swatch in the color menus and the Format Background dialog is 24 by 24 pixels, the minimum target size of WCAG 2.5.8. In a dialog that is too narrow for the ten columns, as on a phone, the swatches shrink to 20 by 20 pixels. ## React and Vue reference #### React ```tsx import { PptxEditor, useEditorColorMode } from '@pptx-editor.dev/react'; import '@pptx-editor.dev/core/styles/editor.css'; function ReviewPanel() { const { colorMode } = useEditorColorMode(); return

; } export function Workspace({ bytes }: { bytes: Uint8Array }) { return (

); } ``` #### Vue ```vue ``` In a component inside `PptxEditorRoot`, `useEditorColorMode()` returns `colorMode` as a computed ref. ## More control See the [`--doc-*` token definitions](https://github.com/eigenpal/pptx-editor/blob/main/packages/core/src/styles/editor.css) for every token and its light and dark values. --- # Dialogs Source: https://www.pptx-editor.dev/docs/0.x/customization/dialogs Register your component in the `popups` map on `PptxEditor.Root`. Your wrapper keeps the packaged draft, validation, and focus handling. For every key and field, see the [dialog reference](/docs/0.x/customization/reference/dialogs). ## Register a custom dialog This wrapper replaces the appearance field of page setup and its OK button. Forward the supplied props to keep the session. #### React ```tsx import { useState } from 'react'; import { PptxEditor, usePageSetupDialog, type PptxEditorPopups } from '@pptx-editor.dev/react'; function AppearanceSelect() { const { values, setValue } = usePageSetupDialog(); return ( Appearance ); } export function DeckEditor({ bytes }: { bytes: Uint8Array }) { const [theme, setTheme] = useState<'light' | 'dark'>('light'); const popups: PptxEditorPopups = { pageSetup: (props) => ( ), }; return ( ); } ``` #### Vue ```vue ``` Content inside a `Field` replaces the field's content. A draft hook called inside the dialog reads and writes the draft. `asChild` on `Apply` keeps OK's wiring on your own button: validation, committing the draft, and closing. Page setup reports the appearance through `onThemeChange`, and you apply it through `colorMode`. To register an ordinary component, wrap it in `definePopup()`. Define the component outside the parent render function, so it keeps its state across renders. ## Dialog parts and draft state Packaged dialogs expose `Header`, `Title`, `Body`, `Footer`, `Field`, `Error`, `Apply`, and `Cancel`. The Background dialog also exposes `Reset`, which picks the layout's background. Put a named part directly inside the dialog to replace it, or pass `hidden` to remove it. ```tsx ``` | Draft hook member | Use | | --- | --- | | `values`, `setValue`, `errors` | Draft fields and their translated validation messages, one for each field. | | `isEnabled` | Whether Apply can run. | | `apply`, `cancel` | Validate and commit the draft, or discard it. A refusal keeps the dialog open with the engine's reason in the `Error` part. | | `reset` | `useBackgroundDialog` only. | Each dialog has its own hook, such as `useFontDialog` or `useParagraphDialog`. Set `preset={false}` on the dialog only when you compose every part yourself. Then the dialog renders only your children. Keep a `Title`, the `Error` part, `Apply`, and `Cancel` in that arrangement. For the field names of each dialog, see [Dialog fields](/docs/0.x/customization/reference/dialogs#dialog-fields). ## Build your own link panel The packaged link popup opens under the selected text on the slide. With no text selected, it opens under the control that opened it. It has **Apply**, **Cancel**, and **Remove link** when the text has a link. Use `useHyperlinkPopup()` to build your own link UI. It gives the link popup's state with no UI. Inside a root, it is the state that the packaged popup shows, so your panel and the link controls agree. Turn off the packaged popup with `popups.hyperlink: false`, or `hyperlinkPopup={false}` on ``. Then mount your panel anywhere inside the root. While it is mounted, the toolbar's link control, **Insert > Link…**, and Ctrl+K (Cmd+K on macOS) open it. #### React ```tsx import { translateKeyOrText } from '@pptx-editor.dev/core/editor'; import { PptxEditor, useHyperlinkPopup, useTranslation } from '@pptx-editor.dev/react'; function LinkPanel() { const { state, setUrl, commitEdit, unlink, close } = useHyperlinkPopup(); const { t } = useTranslation(); if (state.mode !== 'editing') return null; // Open under the anchor. With no anchor, place the panel yourself. const box = state.anchor?.getBoundingClientRect(); return ( ); } export function DeckEditor({ bytes }: { bytes: Uint8Array }) { return ( ); } ``` #### Vue ```vue ``` This example renders editing mode only. Use the packaged `HyperLink` parts for a panel with reading mode and keyboard access. The hook supplies state and actions. Your panel supplies positioning, focus handling, and Escape handling: - **Position.** `state.anchor` is the element the request came from. Else it is the visible toolbar link button, the open menu bar trigger, or the slide. Calls without an anchor use the caret or slide when available. A standalone instance can have no anchor. The example reads the anchor's box at each render. Read it again on scroll and resize, or use your own positioning library. - **Focus.** The field takes focus when the panel opens. When the panel closes, `PptxEditor.Root` returns focus to the slide, unless focus moved elsewhere. - **Escape.** The form closes the panel on Escape. - **Refusal.** `commitEdit()` returns `false` when the engine refuses the target, for example an unsafe address. The panel stays open, and `state.error` contains a catalog key, such as `errors.unsafeLink`, or the engine's own text. Translate it with `translateKeyOrText(t, state.error)`. The link controls open the panel in `editing` mode, with the selected link in `state.url` and its draft in `state.draft`. A click into linked text opens `reading` mode. Keep that mode separate from your edit form. The packaged panel leaves focus at the caret and supports F6 to focus its actions. See [The link popup renderer](/docs/0.x/customization/reference/dialogs#the-link-popup-renderer). | Member | Description | | --- | --- | | `state` | `mode` (`closed`, `reading`, or `editing`), `url`, safe `href` (or `null`), `anchor`, the edited field `draft`, `copied`, refusal text `error` (or `null`), and `canEdit` (whether the selection can take a link now). In Vue, a computed ref. | | `open(link?, anchor?)`, `openAtCaret(anchor?)`, `close()` | Show or hide the panel. `open()` reads the link at the caret, or edits when there is none. `open(null)` edits. A supplied link requests reading mode for the current selection. `openAtCaret` edits the selection, as Ctrl+K does. | | `setUrl(url)`, `beginEdit()`, `commitEdit()` | Change and apply the draft. A change updates `draft` and clears `copied` and `error`. | | `unlink()`, `copy()`, `openTarget()` | Remove the link (the text stays), copy the safe target, or open it in a new tab. A target that `sanitizeHref` refuses never opens. | `useHyperlinkPopupInstance(active?)` makes a separate popup state, including inside a root. Set `active` to `false` to stop it from listening for editor link requests. PPTX Editor writes a link on the selected text with `setLink`, so the state has no display text field. To restyle the packaged popup instead, see [The link popup renderer](/docs/0.x/customization/reference/dialogs#the-link-popup-renderer). ## Open a dialog from your control #### React ```tsx import { useEditorDialog } from '@pptx-editor.dev/react'; export function PageSetupButton() { const dialog = useEditorDialog('pageSetup'); return ( ); } ``` #### Vue ```vue ``` Focus returns to the button when the dialog closes. The button stays focusable when the `pageSetup` entry is `false`. For the other keys, see [Open a dialog by key](/docs/0.x/customization/reference/dialogs#open-a-dialog-by-key). ## Limits - A `false` entry turns off the surface, not the operation. The control that opens it stays visible and disabled with a reason. See [What a `false` entry does](/docs/0.x/customization/reference/dialogs#what-a-false-entry-does). - A dialog closes when the editor opens another document. The Alt Text and Format Picture dialogs also close when the selection moves to another object. See [Popup lifetime](/docs/0.x/customization/reference/dialogs#popup-lifetime). - Dialogs render outside `PptxEditor.Viewport`. Scope your theme on an element around `PptxEditor.Root`. See [Dialog styling](/docs/0.x/customization/reference/dialogs#dialog-styling). - A full custom arrangement must keep a title, an error region, OK (`Apply`), and Cancel. - An application modal must trap and restore focus like the packaged surface. ## See also - [Dialog reference](/docs/0.x/customization/reference/dialogs) - [Menus](/docs/0.x/customization/menus), for the context menu entries - [Appearance](/docs/0.x/customization/appearance) --- # Fonts Source: https://www.pptx-editor.dev/docs/0.x/customization/fonts Pass a font configuration through `fonts`. The editor measures text with font bytes, so CSS `@font-face` rules do not affect layout. The API is the same as DOCX Editor's, so one font setup works for both editors. Without `fonts`, the editor measures with the deck's embedded fonts, then with the metric-compatible substitutes of `@docx-editor.dev/fonts`, from the package's own bytes. It makes no network request. Embedded faces must permit installable or editable embedding. The editor does not load restricted, preview-and-print-only, or bitmap-only embedded faces for measurement or display. It uses an available host face or substitute instead. This rule also applies in viewer mode, because the same session can later allow editing. Save preserves the original embedded font bytes and relationships. Substitution can change text layout. Supply font bytes with appropriate rights when you need the original appearance. ## Load application fonts Host your font files and load them with `loadFonts()`. Include each weight and style the deck uses. ```ts // brand-fonts.ts (in a Vue app, import loadFonts from '@pptx-editor.dev/vue') import { loadFonts } from '@pptx-editor.dev/react'; export function loadBrandFonts() { return loadFonts({ sources: [ { url: '/fonts/BrandSans-Regular.ttf', family: 'Brand Sans', weight: 400, style: 'normal', }, { url: '/fonts/BrandSans-Bold.ttf', family: 'Brand Sans', weight: 700, style: 'normal', }, ], }); } ``` `loadFonts()` returns admitted `sources` and typed `failures`. One failure does not discard other faces. #### React ```tsx import { useEffect, useState } from 'react'; import { PptxEditor } from '@pptx-editor.dev/react'; import { loadBrandFonts } from './brand-fonts'; type Fonts = Awaited>; export function FontEditor({ bytes }: { bytes: Uint8Array }) { const [fonts, setFonts] = useState(); const [failed, setFailed] = useState(false); useEffect(() => { let disposed = false; loadBrandFonts().then( (value) => { if (disposed) return; if (value.failures.length > 0) setFailed(true); else setFonts(value); }, () => !disposed && setFailed(true) ); return () => { disposed = true; }; }, []); if (failed) return

Fonts failed to load.

; if (!fonts) return

Loading fonts…

; return ; } ``` #### Vue ```vue ``` | `loadFonts()` option | Use | | --- | --- | | `sources[].url` | Application-selected font URL. | | `sources[].family` | Family the bytes supply. | | `sources[].weight` | Integer from `1` through `1000`. | | `sources[].style` | `normal` or `italic`. | | `sources[].hash` | Optional `sha256:` hash. Mismatched bytes are refused. | | `sources[].faceIndex` | Collection face index. Default `0`. The editor measures face `0` only and refuses others with `unsupportedFaceIndex`. | | `cacheName` | Cache API bucket. Default `docx-editor-fonts`, shared with DOCX Editor on the same origin. | | `fetcher` | Fetch implementation. Default global `fetch`. | | `maxFontBytes` | Per-source byte limit. Default is the engine hard limit (64 MiB). | | `signal` | Cancels the request. The operation rejects with `signal.reason`. | Failure reasons are `networkError`, `httpError`, `hashMismatch`, `overLimit`, `emptyResponse`, `invalidRequest`, and `malformed`. Cached entries are validated before use. For bytes you hold, `createFontSource` returns a source or a typed failure. ## Choose a font source `fonts` accepts a `FontConfigurationFragment`, a complete `FontConfiguration`, or a `FontResolver`. Combine origins with `useFonts()` or `composeFontConfiguration`. ```tsx import { useFonts } from '@pptx-editor.dev/react'; import { packagedFonts } from '@docx-editor.dev/fonts'; import { googleFonts } from '@docx-editor.dev/fonts/google'; const local = packagedFonts(); const remote = googleFonts({ allow: ['Lato', 'Arvo', 'PT Serif'] }); export function useDeckFonts() { return useFonts(local, remote); } ``` In Vue, call `useFonts()` the same way in ` ``` `PptxEditor.Root` (`PptxEditorRoot` in Vue) takes the same `locale` prop. One catalog applies to all the chrome inside the root: the toolbar, the menus, the dialogs, the panes, the notices, and the labels the engine paints on the canvas, such as empty placeholder prompts. ## Understand the catalog `@pptx-editor.dev/i18n` holds the interface strings. The adapters install it for you. To import a catalog or a type from it, as the examples on this page do, add it to your own dependencies with `npm install @pptx-editor.dev/i18n`. | Export | Use | | --- | --- | | `@pptx-editor.dev/i18n/en.json` | The English catalog, the source of truth. Every other catalog has its shape. | | `englishCatalog` | The English catalog as a typed object (`Catalog`). | | `LocaleCatalog` | The type of a catalog for the `locale` prop: the English shape, where each value is optional and can be `null`. | | `TranslationKey` | Every key, as a dotted path such as `toolbar.bold`. | | `createTranslator(locale?)` | A `Translate` function over a catalog, for use outside the editor. | | `isTranslationKey(key)` | Whether a string is a key. To show a `disabledReason` from `useEditorCommand`, use `translateKeyOrText(t, reason)` from `@pptx-editor.dev/core/editor`. | A missing or `null` value falls back to English. A value can hold `{name}` placeholders, such as `Slide {index}`; keep the placeholder names when you translate it. ## Use a packaged catalog The package ships three catalogs. A `null` value, such as the product name, shows English. | Import | Language | | ------------------------------------------------ | ------------------ | | `import ja from '@pptx-editor.dev/i18n/ja'` | Japanese | | `import ko from '@pptx-editor.dev/i18n/ko'` | Korean | | `import zhCN from '@pptx-editor.dev/i18n/zh-CN'` | Simplified Chinese | ```tsx import ja from '@pptx-editor.dev/i18n/ja'; import { PptxEditor } from '@pptx-editor.dev/react'; export function DeckEditor({ bytes }: { bytes: Uint8Array }) { return ; } ``` To change a value, spread the catalog into your own and replace the value. For any other language, supply its catalog. ## Add a language 1. Copy `@pptx-editor.dev/i18n/en.json` into your application, for example as `locales/de.json`. 2. Translate each value. Keep every key and every `{name}` placeholder. Write shortcuts in the `Ctrl+B` form; the editor shows them as `⌘B` on macOS. 3. Leave a value out, or set it to `null`, to show the English text for it. 4. Import the file, type it as `LocaleCatalog`, and pass it to `locale`. ```ts import type { LocaleCatalog } from '@pptx-editor.dev/i18n'; import de from './locales/de.json'; export const german: LocaleCatalog = de; ``` When `@pptx-editor.dev/i18n` adds keys in a later version, a catalog without them shows English for those keys. In an object literal typed as `LocaleCatalog`, TypeScript reports a key that the English catalog does not have. To switch the language at run time, pass another catalog. The editor keeps the deck, the selection, and the undo history, and repaints the canvas once for its painted labels. ## Translate custom controls `useTranslation()` returns `{ t }`, the translator of the nearest root. Pass `t` a typed `TranslationKey` and the placeholder values: #### React ```tsx import { useEditorState, useTranslation } from '@pptx-editor.dev/react'; export function CurrentSlideLabel() { const { t } = useTranslation(); const current = useEditorState((s) => s.currentSlide); return {t('rail.slideLabel', { index: current + 1 })}; } ``` #### Vue ```vue ``` In Vue, `t` reads the current catalog at each call, so a template that calls it updates when `locale` changes. Application labels belong in your own catalog. `Toolbar.Action` `label` takes resolved text, not a key. ## Limits - The editor has no provider for one region of the interface. One `locale` applies to the whole root. - The editor follows the content of the catalog, not its identity. A new object with the same strings does not repaint. - An unknown key shows the key itself, so a gap is visible instead of blank. - `locale` sets interface strings only. It does not change the language that text shaping uses or the text direction of the deck. ## See also - [Toolbar](/docs/0.x/customization/toolbar) - [React hooks](/docs/0.x/react/hooks) - [Vue composables](/docs/0.x/vue/composables) --- # Layout Source: https://www.pptx-editor.dev/docs/0.x/customization/layout Compose the editor from parts inside `PptxEditor.Root`. `Root` owns the editor and renders no element. For every part and prop, see the [layout reference](/docs/0.x/customization/reference/layout). ## Workspace layout The packaged `PptxEditor` uses this arrangement, and a composed editor works best with the same one. The toolbar is on top. Under it, a row holds the slide rail, a main column, and an optional side panel. The main column holds the canvas, the floating parts, and the notes pane. In the packaged editor, the view switch, the zoom pill, and the font notice float above the notes pane at every notes height. The canvas leaves room for them under the fitted slide. #### React ```tsx import { useState } from 'react'; import { PptxEditor } from '@pptx-editor.dev/react'; import '@pptx-editor.dev/core/styles/editor.css'; export function Workspace({ bytes }: { bytes: Uint8Array }) { const [panel, setPanel] = useState(false); return (

{panel && setPanel(false)} />}

); } ``` #### Vue ```vue ``` The `deck-workspace` classes are your own CSS: ```css .acme-theme { height: 100vh; } .deck-workspace { display: flex; flex-direction: column; height: 100%; min-height: 0; background: var(--doc-bg); } .deck-workspace__dock { display: flex; justify-content: center; padding: 8px 14px 10px; } .deck-workspace__body { display: flex; flex: 1 1 auto; min-height: 0; padding-left: 12px; } .deck-workspace__main { position: relative; display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; } ``` | Part | Requirement | | --- | --- | | `PptxEditor.Viewport` | The styling scope: a plain block element with no layout of its own. Give it a height, or a flexible parent with `min-height: 0`. It is a landmark region named **Presentation editor**, so a screen reader user can go to the editor. | | Each flex level | Keep `min-height: 0`, so the canvas and the rail scroll inside the window instead of growing the page. | | The main column | `position: relative`. The zoom pill, the find bar, and the notices use absolute positions. | | `PptxEditor.Toolbar`, `PptxEditor.Menu` | Inside `PptxEditor.Viewport`. Their menus render inside the viewport and take its tokens. | | `PptxEditor.Content` | Attaches the slide canvas. | `Root` hosts the link popup. Ctrl+K (Cmd+K on macOS), the toolbar's link control, and **Insert > Link…** work with no toolbar on the page. Keep every part, menu, and application control that uses the editor under the same root. ### Name the editor landmark The viewport is a `region` landmark with the name **Presentation editor** (`viewport.ariaLabel`). The slide rail (`navigation`, **Slides**) and the speaker notes (`region`, **Speaker notes**) are landmarks inside it. When a page shows more than one editor, give each one its own name with `label`. It takes text or a translation key. When your own landmarks (`header`, `main`, `aside`) are inside the viewport, set `label={false}`. The viewport then renders no region, and your landmarks stay at the top level. Put the toolbar and the canvas in your `main`. ```tsx

{/* your app bar */}

``` In Vue, write ``. ## Change one part of the packaged editor Use part props to configure the packaged ``. Each prop takes `true`, `false`, or the props object of its part. An object adds the part with those props, so you can change one part and keep the packaged editor. ```tsx