@s8fy/pptx-viewer-solid

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

SolidJS adapter for @s8fy/pptx-viewer, with font-driven text layout, vector graphics, charts, and supported DrawingML effects. The adapter connects reactive options and Solid lifecycle to the shared viewer controller.

Install

pnpm add @s8fy/pptx-viewer @s8fy/pptx-viewer-solid solid-js

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

Peer dependency: SolidJS ^1.9.15. The package declares Node.js 22.12+ and ships ESM/CJS TypeScript declarations.

Usage

import { createMemo } from 'solid-js'
import { PptxViewer } from '@s8fy/pptx-viewer-solid'
import type { ViewerSource } from '@s8fy/pptx-viewer'
import '@s8fy/pptx-viewer/style.css'

export function App(props: { file: ArrayBuffer }) {
  const source = createMemo<ViewerSource>(() => ({ kind: 'file', file: props.file }))
  return (
    <PptxViewer
      source={source()}
      onLoad={({ total }) => console.log(`Loaded ${total} slides`)}
      onError={(error) => console.error(error)}
    />
  )
}

PptxViewer accepts the facade's ViewerOptions plus host class, className, id, style, and onReady props. The adapter only handles Solid lifecycle and option updates; rendering is delegated to the universal viewer controller. It returns null when evaluated without document, so module import and server rendering are safe.

Options and lifecycle

Options can also be supplied through an options object. Defined direct viewer props take precedence; host attributes and onReady belong to the component props. className takes precedence over class. Keep props reactive, as in props.file above.

Prepare file bytes with await file.arrayBuffer(). Use { kind: 'presentation', presentation } for a normalized model, or omit source for an empty viewer. The old top-level file, fileName, and presentation props are rejected.

A stable memoized source avoids loading again on unrelated updates. Replace model/source references when data changes. Source changes reuse the controller, while configuration changes or source removal recreate it. Callback changes alone do not reset it. Disposal automatically destroys the controller.

onReady(viewer) runs on creation/recreation; it is not a load-completion event. onLoad({ total }) indicates document readiness and onSlideChange(index) uses zero-based indices. Keep only the latest onReady controller and use it while mounted. To load imperatively, omit the source prop and await viewer.load(buffer) after onReady; catch export/load promise rejections. Model-only sources cannot export original PPTX/PDF files.

Browser operations must run on the client. The viewer defaults to WASM parsing; PDF export requires WASM and a Worker. Shared rendering capabilities, font, authorization, export, and asset options are documented in the viewer README.

Upgrading to 3.0

The controller received through onReady no longer has 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. Solid component props 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.