PPTX Viewer
retab-ui/pptx-viewerFreeComponent
A canvas-backed PowerPoint viewer rendered entirely client-side (no server conversion): continuous scroll, zoom, rotate, fit-to-width, download, and a per-slide overlay slot. Slides render lazily near the viewport and renders are serialized.
Install it
npx shadcn@latest add https://ui.retab.com/r/pptx-viewer.jsonSource
1"use client";23import * as React from "react";45import { cn } from "@/lib/utils";6import { joinEffectKey } from "@/lib/effect-key";7import { useKeyedLayoutEffect } from "@/hooks/use-keyed-layout-effect";8import { useKeyedMountEffect } from "@/hooks/use-keyed-mount-effect";9import { useMountEffect } from "@/hooks/use-mount-effect";10import {11 createViewerResource,12 type ViewerResource,13} from "@/lib/viewer-resource";1415import { getPptxFitScale, getPptxResetKey } from "./pptx-viewer-core";16import {17 FILE_VIEWER_BEFORE_LAYOUT_MOTION_EVENT,18 readFileViewerBeforeLayoutMotionFrame,19} from "./file-viewer-elements";20import {21 captureFileViewerFitWidthAnchorScreenOffset,22 createFileViewerFitWidthSurfaceMotionResolver,23 FILE_VIEWER_FIT_WIDTH_ANCHOR_BLOCK_PROPERTY,24 resolveFileViewerFitWidthMotionAnchorBlock,25} from "./file-viewer-fit-width-motion";26import type { FileViewerDocumentSurfaceMotionResolver } from "./file-viewer-motion-kernel";27import type { FileViewerMotionFrame } from "./file-viewer-motion-plan";28import { resolveFileViewerRendererLayoutInlineSize } from "./file-viewer-renderer-contract";29import {30 useOptionalFileViewerRendererEnvironment,31 useOptionalFileViewerRendererFrame,32} from "./file-viewer-renderer-frame";33import { useReadingFractionRebase } from "./use-reading-fraction-rebase";34import { PptxViewerFallback } from "./pptx-viewer-fallback";35import { useRetainedPptxSource } from "./pptx-viewer-hooks";36import { preloadPptxRenderer } from "./pptx-viewer-renderer";37import { createPptxScrollActivity } from "./pptx-viewer-scroll";38import {39 PPTX_SLIDE_GAP,40 PPTX_SLIDE_PADDING,41 PptxSlideScroller,42} from "./pptx-viewer-slide";43import { evictPptxSource } from "./pptx-viewer-source";44import type { PptxViewerProps } from "./pptx-viewer-types";45import { usePptxViewportWidth } from "./pptx-viewer-viewport";46import {47 createPptxSlideLayout,48 getPptxSlideAtScrollMarker,49 getPptxSlideTop,50 PPTX_READING_MARKER_RATIO,51 usePptxVisibleSlide,52} from "./pptx-viewer-visible-slide";53import { usePptxZoom } from "./pptx-viewer-zoom";54import {55 createPptxZoomMotionController,56 PPTX_ZOOM_MOTION_TOTAL_MS,57} from "./pptx-viewer-zoom-motion";58import { useIsClient } from "./use-is-client";59import { ViewerControls } from "./viewer-controls";60import { ViewerErrorBoundary } from "./viewer-error";6162export type { PptxDocumentSource, PptxViewerProps } from "./pptx-viewer-types";63export type {64 PptxSourceLoadTiming,65 PptxSlideRenderTiming,66 PptxSlideOverlayProps,67// … truncated
What it pulls in
npm packages
Other registry items
Files it writes
More from retab-ui
All 130 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Alertalert | retab-ui | Components | Free | 1 dep | |
| Alert Dialogalert-dialog | retab-ui | Components | Free | 1 dep | |
| Aspect Ratioaspect-ratio | retab-ui | Components | Free | no deps | |
| Attachment Sidebarattachment-sidebar | retab-ui | Components | Free | 1 dep | |
| Autocompleteautocomplete | retab-ui | Components | Free | 2 deps | |
| Calendarcalendar | retab-ui | Components | Free | 2 deps | |
| Code Viewercode-viewer | retab-ui | Components | Free | 2 deps · 32 files | |
| Commandcommand | retab-ui | Components | Free | 2 deps |
