The React PowerPoint Viewer renders presentations directly in the browser as a continuously scrollable, virtualized slide deck with keyboard-accessible navigation, zoom controls, and a virtualized thumbnail rail. Its canvas uses the app's background theme token so it follows light and dark mode automatically. It supports both modern .pptx files and legacy .ppt files without requiring a server-side conversion step.
Installation
pnpm dlx shadcn@latest add @extend/pptx-viewer
Useful behaviors
- Render
.pptxand legacy.pptfiles directly in the browser. - Keep the current slide synchronized across the header controls and thumbnail rail.
- Virtualize large thumbnail rails and prefetch only nearby slide previews.
- Scroll continuously through virtualized slides using the shared scroll area and custom scrollbar styling.
- Collapse the shared thumbnail sidebar into an overlay on narrower viewer widths.
- Upload, download, jump to a slide number, and inject custom toolbar actions.
API Reference
PptxViewerPreview
The PptxViewerPreview component wraps @extend-ai/react-pptx with the shared document-viewer sidebar, scroll area, header controls, upload, and download behavior.
| Prop | Type | Default | Required |
|---|---|---|---|
className | string | - | No |
defaultThumbnailSidebarOpen | boolean | false | No |
defaultZoom | number | 100 | No |
fileName | string | - | No |
initialSlide | number | 1 | No |
showDownload | boolean | true | No |
showToolbar | boolean | true | No |
showUpload | boolean | true | No |
src | string | - | No |
toolbarActions | React.ReactNode | - | No |