Component Props

For custom host sizing, see Viewport fitting for fitPadding, maxFitScale, framework-specific examples, and default values.

<PowerPointViewer> accepts the PowerPointViewerProps interface below and emits the events in PowerPointViewerEmits. Only content is required; everything else is optional. This reference is taken directly from packages/vue/src/viewer/types.ts.

<script setup lang="ts">
import { PowerPointViewer } from 'pptx-vue-viewer';
import type { PowerPointViewerProps } from 'pptx-vue-viewer';
</script>

TIP

PowerPointViewer also has a template-ref surface, see defineExpose - that is not part of PowerPointViewerProps.

Content

Prop	Type	Default	Description
content	Uint8Array | ArrayBuffer	(required)	Raw .pptx file bytes.
filePath	string	-	Original file path or name. Used as a version-history label context; see Autosave.
fileName	string	-	Display name of the open document, shown in the title bar.

Editing

Prop	Type	Default	Description
canEdit	boolean	false	Enables editing actions (toolbar editing controls, inspector edits, inline text editing, slide management). When false, the viewer is read-only.

Display

These four match the Svelte and vanilla bindings; the defaults and clamping are shared.

Prop	Type	Default	Description
initialSlide	number	0	Zero-based slide shown after each load, clamped into the deck. Changing it later applies to the next load, not the current slide.
showToolbar	boolean	true	Show the editor chrome: title bar, ribbon and toolbar, protected-view and read-only banners, the mobile toolbar and the status bar. false leaves the canvas (and the thumbnail pane, if shown).
showThumbnails	boolean	true	Show the slide thumbnail pane. It still follows the user's own collapse toggle and the slidesPane customisation panel.
showCompatibilityToasts	boolean	true	Show the compatibility warning toast stack after a load. false hides the stack only; the warnings are still collected. Independent of showToolbar.

<PowerPointViewer
	:content="bytes"
	:initial-slide="2"
	:show-toolbar="false"
	:show-thumbnails="false"
/>

Events

Event	Payload	Description
@dirty-change	isDirty: boolean	Fired when the unsaved-changes flag flips.
@content-change	content: Uint8Array	Fired with the re-serialised document bytes when content changes.
@autosave	content: Uint8Array	Fired with the re-serialised bytes on each autosave cycle; see Autosave.
@active-slide-change	slideIndex: number	Fired when the active slide changes.
@zoom-change	zoom: number	Fired when the zoom level changes.
@slide-count-change	count: number	Fired when the total slide count changes (slide added/deleted).
@selection-change	elementIds: string[]	Fired when element selection changes.
@mode-change	mode: string	Fired when the viewer mode changes (e.g. edit to present).
@start-collaboration	config: CollaborationConfig	Fired when the user starts a session from the Share dialog.
@stop-collaboration	-	Fired when the user stops a session from the Share dialog.

content and autosave share one signature (Uint8Array payload) in the underlying PowerPointViewerEmits type, as do active-slide-change, zoom-change, and slide-count-change (all number payloads).

No onOpenFile event

File > Open is a prop, not an event: onOpenFile?: () => void (see below), matching React's callback-prop shape rather than the emit convention used elsewhere in this component.

Presentation / authoring

Prop	Type	Default	Description
authorName	string	-	Display name used as the author for comments and annotations. Falls back to collaboration.userName when collaborating, otherwise 'You'.
class	string	-	Optional class name applied to the viewer root element (props key is class, not className).
smartArt3D	boolean	false	Opt in to the Three.js SmartArt renderer (extruded 3D blocks on WebGL). Requires the optional three peer; falls back to SVG without it.
surfaceChart3D, barChart3D, lineChart3D, areaChart3D, pieChart3D	boolean	false	Independently opt in to interactive Three.js renderers for the matching 3D chart kinds. Each falls back to SVG when three is unavailable or the chart cannot render as a WebGL scene.
ai	PptxAiConfig	-	Enables the optional AI assistant. Its SDK peers load only when the panel is opened; omit this prop to leave the assistant unavailable.
onOpenFile	() => void	-	Host override for the File > Open action: bypasses the built-in file picker; the host then supplies a new content prop instead.

Theming

Prop	Type	Default	Description
theme	ViewerTheme	-	Theme configuration: partial color overrides, a custom radius, and arbitrary cssVars. Unset values fall back to the built-in dark theme. See Theming.

<PowerPointViewer
	:content="bytes"
	:theme="{ colors: { primary: '#6366f1', background: '#0f172a' }, radius: '0.75rem' }"
/>

UI customization

Prop	Type	Default	Description
customization	ViewerCustomization	-	Hide, lock or remap any part of the chrome: ribbon tabs and buttons, File > Options pages, sections and settings (lock a value, set a default), File tab pages and cards, context-menu entries, editor shortcuts, panels, features (AI, collaboration) and dialogs. Unioned with hiddenActions. A new object replaces the whole customisation.

<PowerPointViewer
	:content="bytes"
	can-edit
	:customization="{ ribbon: { hiddenTabs: ['draw'] }, disabledFeatures: ['ai'] }"
/>

The same helpers (hideRibbonTab, lockSetting, remapShortcut, ...) are available on the template ref to change it at runtime; see the API page. Every id, the rules and recipes are in the UI Customization guide.

Collaboration

These props enable and control real-time co-editing. See Collaboration for the full flow and the CollaborationConfig shape.

Prop	Type	Default	Description
collaboration	CollaborationConfig	-	When provided, enables collaborative editing with live cursors, presence, and Yjs CRDT sync. Requires the yjs and y-websocket/y-webrtc peers.
shareDefaults	{ roomId?: string; userName?: string; serverUrl?: string }	-	Default values for the Share dialog fields. If omitted, the fields start empty.

Starting/stopping a session is controlled via the @start-collaboration / @stop-collaboration events above: the host sets/clears the collaboration prop in response.

Full interface

interface PowerPointViewerProps {
	content: Uint8Array | ArrayBuffer;
	filePath?: string;
	fileName?: string;
	canEdit?: boolean;
	initialSlide?: number;
	showToolbar?: boolean;
	showThumbnails?: boolean;
	showCompatibilityToasts?: boolean;
	autosave?: boolean;
	autosaveIntervalMs?: number;
	class?: string;
	authorName?: string;
	theme?: ViewerTheme;
	collaboration?: CollaborationConfig;
	shareDefaults?: { roomId?: string; userName?: string; serverUrl?: string };
	onOpenFile?: () => void;
	smartArt3D?: boolean;
	surfaceChart3D?: boolean;
	barChart3D?: boolean;
	lineChart3D?: boolean;
	areaChart3D?: boolean;
	pieChart3D?: boolean;
	ai?: PptxAiConfig;
}

interface PowerPointViewerEmits {
	(e: 'dirty-change', isDirty: boolean): void;
	(e: 'content-change' | 'autosave', content: Uint8Array): void;
	(e: 'active-slide-change' | 'zoom-change' | 'slide-count-change', value: number): void;
	(e: 'mode-change', mode: string): void;
	(e: 'selection-change', elementIds: string[]): void;
	(e: 'start-collaboration', config: CollaborationConfig): void;
	(e: 'stop-collaboration'): void;
}

Autosave

pptx-vue-viewer debounces slide changes, writes a crash-recovery snapshot to the shared IndexedDB store, and hands the serialised bytes back to the host via @autosave.

Prop	Type	Default	Description
autosave	boolean	true	Recovery autosave. A policy ceiling over the title-bar toggle; see below.
autosaveIntervalMs	number	File > Options cadence	Debounce window (ms). An explicit value outranks the user's AutoRecover setting.

Who decides: the autosave prop or the AutoSave toggle?

The rule is the same in all five bindings and lives in one shared decision function, resolveAutosaveActivation:

The autosave prop is a policy ceiling. The title-bar AutoSave toggle is the user's preference inside it.

autosave	What runs	The toggle
omitted	Autosave runs; the user's toggle decides, defaulting to on.	Works.
true	Same as omitted: the host permits it, the user decides.	Works.
false	Autosave is off, and no recovery prompt is offered on load.	Inert (it must not move).

A preference can never exceed a policy, which is why autosave: false also takes the switch away: a control that silently does nothing is worse than no control. canEdit/editable and a filePath key remain hard requirements either way.

The same rule governs the cadence: an explicit autosaveIntervalMs is a host policy honoured as given, and omitting it follows the user's File > Options > Save > "Save AutoRecover information every N minutes" (two minutes by default).

The default is true because crash recovery that is off by default is crash recovery nobody has.

Recovering a snapshot

When a deck finishes loading and a snapshot newer than 24 hours exists for the same key, the viewer raises a "Recover unsaved changes?" dialog offering Restore or Discard. Restore loads the snapshot's bytes; Discard deletes it. It is deliberately not raised for a snapshot this tab has already taken delivery of (for example when the host itself restored it through restoreSessionDeck).

<PowerPointViewer
	:content="bytes"
	can-edit
	autosave
	:autosave-interval-ms="5000"
	@autosave="persist"
/>

The title bar exposes an AutoSave toggle the user can switch off at runtime; toggling it off stops new saves without discarding anything already emitted. Each autosave cycle also captures an in-memory, session-scoped version-history snapshot (see the Version History panel), separate from the @autosave payload itself.

Persistence and recovery prompt

Each autosave cycle also writes the bytes to the shared IndexedDB recovery store (the same store React, Angular, Svelte and vanilla use), so File > Open's "Recent" list and File > Account's Storage & Privacy panel report real data. Those snapshots are stored as a plain ZIP even for a password-protected deck, so recovery can read them back without a password.

Vue also shows the "recover an unsaved session" prompt on load (AutosaveRecoveryDialog), matching every other binding.