UI Overview

Configure the PDF canvas, editor controls, locale, and thumbnail worker.

@univerjs-pro/pdfs-ui mounts PDF units in the standard Univer workbench and is licensed through Web SDK.

Package responsibilities

PackageResponsibility
@univerjs-pro/pdfsRegisters the UNIVER_PDF unit, document model, and durable PDF commands.
@univerjs-pro/pdfs-uiMounts the browser canvas, thumbnail rail, and footer. Its local editing controls are enabled by default.
@univerjs-pro/pdfs-editorDeclares the collaboration-side editor dependencies. It does not mount the PDF UI or control editor.enabled.

UniverPdfsUIPlugin depends on UniverLicensePlugin and UniverPdfsPlugin. Complete the licensed PDF setup before registering the UI plugin.

Register the UI plugin

TypeScript
import { UniverPdfsUIPlugin } from '@univerjs-pro/pdfs-ui'import PdfsUIEnUS from '@univerjs-pro/pdfs-ui/locale/en-US'import '@univerjs-pro/pdfs-ui/lib/index.css'univer.registerPlugin(UniverPdfsUIPlugin)

Merge PdfsUIEnUS into the locales passed to new Univer(...). The locale pack translates PDF-specific ribbon, inspector, context-menu, and page-rail labels.

Viewer and editor modes

The plugin always mounts the page-thumbnail rail, PDF canvas, and footer. Editing is enabled by default and additionally registers the ribbon, context menus, inspector, clipboard, insertion commands, and editing actions and controllers.

Use viewer-only mode when the current application must not expose those editing controls:

TypeScript
univer.registerPlugin(UniverPdfsUIPlugin, {  editor: { enabled: false },})

This option changes the mounted UI and editing-specific controllers and services. It is not an authorization policy and does not alter a saved PDF snapshot.

Thumbnail worker

thumbnailWorkerURL accepts a string, URL, or existing Worker. The referenced module must start the exported worker runtime:

TypeScript
import { startPdfPageThumbnailWorker } from '@univerjs-pro/pdfs-ui'startPdfPageThumbnailWorker()
TypeScript
univer.registerPlugin(UniverPdfsUIPlugin, {  thumbnailWorkerURL: new URL('./pdf-thumbnail-worker.js', import.meta.url),})

The worker requires a dedicated Worker scope. If no worker is configured, the browser lacks the required APIs, or a page needs a main-thread-only resource, thumbnail rendering uses the main thread.

Public API boundary

The UI invokes PDF commands and services internally. A ribbon button does not imply a matching public method. Use the PDF Facade guide for supported programmatic editing, Import and export for conversion, and Print for browser printing.

How is this guide?

© 2026 DreamNum Co., Ltd.