Skip to content

Component Props

<PowerPointViewer> follows the Vue binding's contract with two Svelte 5 conventions: events are callback props (onload, not @load), and the content prop is named source.

Content and appearance

PropTypeDefaultDescription
sourceUint8Array | ArrayBuffer | null | undefined-Raw .pptx bytes. Assigning a new value loads the new presentation in place.
fontsViewerFontSource[]-Licensed font sources supplied by the host ({ family, src, format?, weight?, style? }).
themeViewerThemebuilt-inPartial palette / radius / raw CSS vars; see Theming.
localestring'en'UI locale (BCP 47). Register non-English dictionaries via pptx-svelte-viewer/i18n.
classstring-Extra class on the root element.

Chrome and behaviour

PropTypeDefaultDescription
initialSlidenumber0Slide shown after load (0-based, clamped).
showThumbnailsbooleantrueShow the thumbnail sidebar.
showToolbarbooleantrueShow the navigation/zoom toolbar (and, when editable, the ribbon).
showNotesbooleantrueShow the speaker-notes panel and its toolbar toggle. Pass onnotesupdate to make the panel editable; omit it for read-only notes.
hiddenActionsToolbarActionId[]-Toolbar buttons and/or ribbon tabs to hide (see values below).
fileNamestring-Display name shown in the desktop title bar.
smartArt3DbooleanfalseOpt in to the Three.js (WebGL) SmartArt renderer. Requires the optional three dependency; falls back to SVG when it is unavailable or the WebGL mount fails.
editablebooleanfalseEnable in-place editing: select, drag, resize/rotate handles, double-click text editing, keyboard shortcuts, undo/redo, save/download.

hiddenActions values

ToolbarActionId is a union of quick-access button ids and ribbon tab ids:

  • Buttons: share, broadcast, export, undo, redo, record, notes, fullscreen, zoom, navigation
  • Tabs: file, home, insert, draw, design, transitions, animations, slideShow, record, review, view, help

zoom and navigation each hide their whole control cluster. record is shared by the quick-access button and the ribbon tab, so hiding it removes both.

svelte
<!-- A read-only embed with the collaboration entry points removed -->
<PowerPointViewer source={bytes} hiddenActions={['share', 'broadcast']} />

File > Options pickers

These drive the built-in Appearance and Language pickers under File > Options. Without the on*Change callbacks the user's choice is persisted to localStorage automatically; supplying a callback hands persistence to the host.

PropTypeDefaultDescription
defaultThemeKeystringstored, else 'default'Initial Appearance selection: a key into availableThemes (or the built-in THEME_CATALOG).
availableThemesreadonly ThemeCatalogEntry[]THEME_CATALOGTheme choices offered by the Appearance picker.
onThemeChange(themeKey: string) => void-Fired when the user picks a theme (Design tab or Options).
defaultLocalestringstored, else localeInitial Language selection (locale code).
availableLocalesreadonly LocaleCatalogEntry[]registered localesLanguage choices offered by the Language picker; defaults to every locale registered via registerTranslations.
onLocaleChange(locale: string) => void-Fired when the user picks a language from Options.
accountAuthAccountAuthConfigdisabledOptional hook point for a real sign-in flow in File > Account ({ enabled, onSignIn, signedInUser? }).

Precedence

Once the user picks a theme from the UI, that catalog key drives the effective theme for the rest of the session; the theme prop still wins whenever the resolved key is 'default'. Similarly, a user-picked language always wins over the locale prop for the session.

Autosave

See Getting Started > Autosave for the full flow.

PropTypeDefaultDescription
autosavebooleantrueRecovery autosave to the shared IndexedDB store (requires filePath). A policy ceiling over the title-bar toggle; see below.
filePathstring-IndexedDB record key (typically the open file's name/path). Autosave is inert without one.
autosaveIntervalMsnumberFile > Options cadenceDebounce 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.

autosaveWhat runsThe toggle
omittedAutosave runs; the user's toggle decides, defaulting to on.Works.
trueSame as omitted: the host permits it, the user decides.Works.
falseAutosave 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).

Collaboration

See Collaboration for the config shape and transports.

PropTypeDefaultDescription
collaborationCollaborationConfig-When set, connects to the room and syncs edits in real time. Clearing it tears the session down.
shareDefaults{ roomId?: string; userName?: string; serverUrl?: string }-Prefilled values for the built-in Share dialog (Broadcast reuses serverUrl).

Event callbacks

PropSignatureFired when
onload(detail: ViewerLoadDetail) => voidA presentation finishes loading ({ slideCount, canvasSize }).
onerror(message: string) => voidA load fails (message is human-readable).
onslidechange(index: number) => voidThe active slide changes (0-based).
onchange() => voidAfter every committed editing mutation (move / resize / rotate / delete / duplicate / nudge / text / notes).
ondirtychange(dirty: boolean) => voidThe unsaved-edits flag flips.
oncontentchange(content: Uint8Array) => voidThe serialized document bytes change.
onmodechange(mode: string) => voidThe viewer mode changes ('preview' | 'edit' | 'present' | 'master').
onzoomchange(zoom: number) => voidThe zoom level changes (1 = 100%).
onselectionchange(elementIds: string[]) => voidThe element selection changes.
onslidecountchange(count: number) => voidThe total slide count changes.
onnotesupdate(notes: string) => voidThe user commits a speaker-notes edit (change / blur). Omit to render the notes panel read-only.
onopenfile() => voidHost override for the File > Open action.
onautosave(bytes: Uint8Array) => voidAfter each successful autosave snapshot.
onautosavetoggle(enabled: boolean) => voidThe desktop title bar toggles AutoSave.
onstartcollaboration(config: CollaborationConfig) => voidThe user starts a session from the Share/Broadcast dialog.
onstopcollaboration() => voidThe user stops the collaboration session.
onThemeChange(themeKey: string) => voidThe user picks a theme (note the camelCase name; it belongs to the Options-picker group above).
onLocaleChange(locale: string) => voidThe user picks a language (camelCase, Options-picker group).

Payload types

ts
interface ViewerLoadDetail {
	/** Number of slides in the loaded presentation. */
	slideCount: number;
	/** Slide canvas size in pixels. */
	canvasSize: CanvasSize; // { width: number; height: number }
}

Type exports

ts
import type {
	CanvasSize,
	CollaborationConfig,
	CollaborationRole,
	CollaborationTransport,
	PowerPointViewerApi,
	PowerPointViewerProps,
	ViewerLoadDetail,
	ViewerTheme,
	ViewerThemeColors,
	AutosaveStatus,
	AutosaveRecord,
} from 'pptx-svelte-viewer';

Theme presets and helpers (vermilionLightTheme, vermilionDarkTheme, defaultThemeColors, defaultRadius, themeToCssVars, defaultCssVars) are exported from the package root; i18n helpers (registerTranslations, translate, keyToLabel, translationsEn, and the TranslationKey type) live under pptx-svelte-viewer/i18n. See Theming and Localization.

Released under the Apache-2.0 License.