# UI Overview

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

- Human documentation: [https://docs.univer.ai/guides/pdfs/ui/overview](https://docs.univer.ai/guides/pdfs/ui/overview)

- Agent Markdown: [https://docs.univer.ai/guides/pdfs/ui/overview.md](https://docs.univer.ai/guides/pdfs/ui/overview.md)

- Requested language: `en-US`

- Content language: `en-US`

- Documentation version: `1.0.0-rc.0`

- Source: [pdfs/ui/overview.mdx](https://github.com/dream-num/documentation/blob/dev/content/guides/pdfs/ui/overview.mdx)

---

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

## Package responsibilities

| Package                     | Responsibility                                                                                                 |
| --------------------------- | -------------------------------------------------------------------------------------------------------------- |
| `@univerjs-pro/pdfs`        | Registers the `UNIVER_PDF` unit, document model, and durable PDF commands.                                     |
| `@univerjs-pro/pdfs-ui`     | Mounts the browser canvas, thumbnail rail, and footer. Its local editing controls are enabled by default.      |
| `@univerjs-pro/pdfs-editor` | Declares 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

```ts
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:

```ts
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:

```ts title="pdf-thumbnail-worker.ts"
import { startPdfPageThumbnailWorker } from '@univerjs-pro/pdfs-ui'

startPdfPageThumbnailWorker()
```

```ts
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](https://docs.univer.ai/guides/pdfs/getting-started/facade.md) for supported programmatic editing, [Import and export](https://docs.univer.ai/guides/pdfs/features/import-export.md) for conversion, and [Print](https://docs.univer.ai/guides/pdfs/features/print.md) for browser printing.