Extend UI

Document Viewer Sidebar

Extend

External demo

Installation

No MCP yet? Connect your agent.

This responsive shell provides the thumbnail rail used across Extend's PDF, DOCX, and PowerPoint viewers. It renders inline when the viewer is wide enough and switches to an overlay on narrower containers.

DocumentViewerThumbnailSidebar owns the open/closed presentation. DocumentViewerSidebarSkeleton preserves the layout while pages load. useElementWidth and useInlineThumbnailSidebar are available when a custom viewer needs the same container-width behavior.

Treat the viewer's own width as the breakpoint source. This is designed for embedded workspaces where the browser viewport may be much wider than the document panel.

Agent guides

Integrate browser-based document renderersWhen: A viewer or editor is rendered in a server-rendered React application or loads documents from another origin.From the collection

Document renderers and data grids in Extend UI rely on browser APIs. In a server-rendered React application, keep the surrounding route server-rendered if useful, but load the document surface from a client component. Next.js users can use a client wrapper or next/dynamic with server rendering disabled for the viewer or editor.

Give the surface a measurable height. Virtualized pages, slides, and cells cannot size themselves inside an unconstrained container. A fixed height, viewport-relative height, or flex child whose ancestors all establish a height works.

Remote document URLs must be reachable by the browser, not only by the application server. Configure CORS for the application origin and preserve byte-range requests when the storage service and renderer support them. For private files, resolve a short-lived signed URL immediately before opening the document rather than embedding cloud credentials in the component.

Test with representative large files and with the same browser security headers used in production. PDFium WebAssembly, worker-based renderers, canvas export, and cross-origin images can expose deployment-only failures that a small local fixture will not.

Connect review panels to the PDF canvasWhen: A document workflow combines the PDF viewer with citations, layout results, signatures, or split groups.From the collection

Keep the PDF viewer as the source of page geometry and navigation. Review records should carry a one-based page number plus coordinates relative to the original page dimensions. Convert upstream extraction coordinates once at the data boundary instead of compensating independently in every overlay.

Use the viewer's active-page callback to update the review panel. In the other direction, call the viewer handle's page or page-area scroll method when a citation, OCR block, signature field, or split thumbnail is selected. This two-way controlled state keeps the panes synchronized without coupling their internal implementations.

Render page annotations through the viewer's overlay hook. The hook receives page size, scale, and rotation, which are the inputs needed to position a normalized region correctly. Recompute overlays when rotation or zoom changes instead of storing screen pixels.

The resizable shell owns layout only. Keep edited fields, split groups, signatures, and persistence in the parent workflow so a pane can remount without losing application state.

Map an object store into File SystemWhen: File System reads S3, R2, or another prefix-based object store instead of a static in-memory list.From the collection

Translate object-store results into one flat list of file and folder records. Preserve the full key or path on every record. File System derives the hierarchy from those paths, so it does not need a separate nested tree from the server.

For large buckets, return folders with hasChildren: true and implement loadChildren. Pass the requested prefix and cursor to S3, R2, or the equivalent listing API, then return the next page and cursor until the folder is complete.

Resolve private file URLs with getFileUrl when a file opens. Generate signed URLs on the server and keep their lifetime long enough for the selected viewer to fetch or range-read the document. Do not expose object-store credentials to the browser.

Thumbnail generation is a separate concern. Store preview URLs with the manifest when possible. For long documents, provide the first page eagerly, the total preview page count, and load later page thumbnails on demand. Use onFileOpen when navigation, authorization, or a custom preview route must run before the built-in viewer dialog.