@s8fy/pptx-viewer-svelte

High-fidelity PowerPoint viewing in Svelte, powered by the shared PPTX viewer engine.

Svelte actions and imperative helpers for @s8fy/pptx-viewer, with font-driven text layout, vector graphics, charts, and supported DrawingML effects. Use the pptx action or mountViewer helper to manage the shared viewer controller.

Install

pnpm add @s8fy/pptx-viewer @s8fy/pptx-viewer-svelte svelte

@s8fy/pptx-viewer is a direct installation because the application imports its stylesheet.

Peer dependency: Svelte 5. The package declares Node.js 22.12+. It exports actions and imperative helpers, not a Svelte component.

Usage

<script lang="ts">
  import { pptx } from '@s8fy/pptx-viewer-svelte'
  import type { PptxActionParams } from '@s8fy/pptx-viewer-svelte'
  import '@s8fy/pptx-viewer/style.css'

  let { file }: { file: ArrayBuffer } = $props()
  function onError(error: Error) { console.error(error) }
  let options: PptxActionParams = $derived({
    source: { kind: 'file', file },
    onError,
  })
</script>

<div use:pptx={options}></div>

The pptx action reuses the controller for source changes and recreates it when configuration changes. The package also exports mountViewer() for component authors that prefer an imperative wrapper. Module import is SSR-safe, while invoking an action or helper requires a browser DOM node.

Action parameters and lifecycle

PptxActionParams extends ViewerOptions with onReady(viewer). onReady runs on creation/recreation, not after file loading; use onLoad({ total }) for document readiness. Other callbacks include onSlideChange(index), onLicenseStateChange(state), and onError(error).

Use await file.arrayBuffer() to prepare file bytes. A normalized model source is { kind: 'presentation', presentation }. Omitting source creates an empty viewer. Top-level file, fileName, and presentation options are rejected.

Keep source objects stable between unrelated updates. Replace a source/model reference when its contents change. Source removal or configuration changes recreate the controller; callback changes alone do not. Svelte calls the action's cleanup when its node is removed, so do not separately destroy that controller.

Imperative helper

import { mountViewer } from '@s8fy/pptx-viewer-svelte'
import '@s8fy/pptx-viewer/style.css'

export function mount(host: HTMLElement) {
  const mounted = mountViewer(host, { onError: console.error })
  // Later: await mounted.viewer.load(buffer, 'slides.pptx')
  // Apply a complete options object with mounted.update(options).
  return mounted
}

mountViewer returns { viewer, update(options?), destroy() }. viewer always reads the current controller; update returns that controller and replaces the complete options set rather than merging a patch. Call destroy() on disposal when using this helper directly.

Await imperative loads/exports and handle rejections. PDF/PPTX export requires an original file source. In SvelteKit, run imperative mounting in onMount; actions already run on the client. Shared rendering capabilities, defaults, font/asset settings, and methods are in the viewer README.

Upgrading to 3.0

• The usePptx alias is removed: import pptx and change use:usePptx={options} to use:pptx={options}.
• The createPptx alias is removed: call mountViewer(host, options) instead.
• Controllers from onReady or mounted.viewer no longer have fullscreen(). Use await viewer.enterFullscreen() in a user interaction handler and handle its Promise<void> rejection; onError only notifies and does not consume the rejection.

The retained pptx action and mountViewer signatures are unchanged. Rendering, parsing, PDF export, and lifecycle behavior follow the shared Viewer 3.0.0 contract.

License

The default license is the PolyForm Noncommercial License. Commercial use requires a separate commercial license.