Document Viewer Wrapper Element

The ui.IDocumentViewerWrapperElement interface represents the custom HTML element that wraps the PDF viewer UI. It provides methods to dynamically update the viewer's configuration, such as theme, layout, and user settings.

Accessing the Element

You can access the ui.IDocumentViewerWrapperElement instance from the result of PdfEditor:

const editor = await PdfEditor({ ... });
const wrapper = editor.ui.pdfWebElement;

Dynamic Configuration

The wrapper element allows you to update configuration options at runtime without reloading the viewer.

Theme

Change the theme (light/dark/system) or override individual colors. customStyles keys are the full --pwv-* custom property names; see Theme.

wrapper.setTheme({
  pallet: 'dark',
  customStyles: {
    '--pwv-btn-choose-file-background-default': '#ff0000',
  },
});

Layout

Update the layout configuration. Header tabs are opt-in (only the tabs in tabs.list are shown); the other sections are opt-out (enabled unless set to false). See Layout.

wrapper.setLayout({
  header: {
    tabs: {
      list: {
        // Only these tabs are shown — 'tools' and the rest are hidden
        edit: {},
        comment: {},
      },
    },
  },
});

Language

Change the UI language:

wrapper.setLanguage({
  code: 'fr',
});

Branding

Update branding settings:

wrapper.setBranding({
  logoSvg: '<svg>...</svg>',
  name: 'My Custom PDF Viewer',
  links: [[{ label: 'Contact us', url: 'https://example.com/contact' }]],
  description: 'A custom PDF viewer implementation',
});

General Settings

Read or update the "open documents in new tab" and "tools layout" preferences (the same settings exposed in the Settings dialog's General / Appearance tabs) at runtime:

import { LabelAlignment } from '@avanquest/pdf-web-viewer';

// Open documents in new tab
wrapper.getOpenDocumentsInNewTab(); // boolean
wrapper.setOpenDocumentsInNewTab(false);

// Restore last view settings when reopening documents
wrapper.getRestoreLastViewSettings(); // boolean
wrapper.setRestoreLastViewSettings(false);

// Tools layout (Row / Column)
wrapper.getToolsLayout(); // LabelAlignment.ROW | LabelAlignment.COLUMN
wrapper.setToolsLayout(LabelAlignment.COLUMN);

// Navigation rail, collapsed to icons (navigationSidebar layout only)
wrapper.getSidebarCollapsed(); // boolean
wrapper.setSidebarCollapsed(true);

// Whether a collapsed rail peeks open under the pointer
wrapper.getSidebarExpandOnHover(); // boolean
wrapper.setSidebarExpandOnHover(false);

Units and Guides

Update the measurement units and grid settings:

import { Units } from '@avanquest/pdf-web-viewer';

wrapper.setUnitsAndGuides({
  units: Units.centimeters,
  grid: {
    width: 50,
    height: 50,
    lineColor: '#cccccc',
  },
});

User Settings

User Name

Set the user name used for annotations:

wrapper.setUserName('Jane Doe');

User Signature & Initials

Set the user's saved signatures and initials. Note that you need to provide the full AppearanceModel.

import { AppearanceDataType, AppearanceType } from '@avanquest/pdf-web-viewer';

const signature = {
  type: AppearanceDataType.Type,
  appearanceType: AppearanceType.Signature,
  timestamp: Date.now(),
  signimage: {
    path: '...', // Path data if applicable
    ext: 'png',
    img: '...', // Base64 image data
  },
};

wrapper.setUserSignature([signature]);

User Fonts

wrapper.setUserFonts({
  baseUrl: 'https://cdn.example.com/fonts/',
  fonts: [
    {
      family: 'MyCustomFont',
      category: 'sans-serif',
      files: { regular: 'MyCustomFont.ttf' },
      kind: 'webfonts#webfont',
      lastModified: '2022-01-01',
      menu: 'MyCustomFont',
      subsets: ['latin'],
      variants: ['regular'],
      version: '1.0',
    },
  ],
});

Default Font

Set the default font for text tools:

wrapper.setDefaultFont({
  family: 'Arial',
  size: 12,
});

User Default Font

Set the user's preferred default font (overrides system default):

wrapper.setUserDefaultFont({
  family: 'MyCustomFont',
  size: 14,
});

Advanced Operations

Apply User Appearance

Programmatically apply a user's signature or initial appearance.

import { AppearanceType } from '@avanquest/pdf-web-viewer';

wrapper.applyUserAppearance(
  {
    path: '...',
    ext: 'png',
    img: '...',
  },
  AppearanceType.Signature,
);

Fullscreen Layout

Apply or undo the viewer's fullscreen layout without touching the browser's fullscreen state. This is the counterpart of onFullscreenRequested: a host that answers it by fullscreening a window of its own reports here what that window did — including the times it left fullscreen without being asked (an OS shortcut, a native menu, Escape). A viewer driving its own fullscreen needs none of this.

wrapper.setFullscreenLayout(await appWindow.isFullscreen());

Set Document View

Manually set the active document view element (advanced use case for custom view management):

wrapper.setDocumentView(myDocumentViewElement);

API Reference

Properties

Property	Type	Description
`documentView`	ui.IDocumentView `\| null`	The currently active document view element inside the wrapper.
`options`	ui.ISetupOptions `\| null`	The current setup options.

Methods

Method	Description
`setTheme(themeConfig:` ui.IThemeConfig`): void`	Updates the theme configuration.
`setLayout(layoutConfig:` ui.ILayoutConfig`): void`	Updates the layout configuration.
`setLanguage(language:` ui.ILanguageConfig`): void`	Updates the language configuration.
`setBranding(brandingConfig:` ui.IBrandingConfig`): void`	Updates the branding configuration.
`setUserName(userName: string): void`	Sets the current user's name.
`setUserSignature(signature:` ui.AppearanceModel`[]): void`	Sets the user's saved signatures.
`setUserInitial(initial:` ui.AppearanceModel`[]): void`	Sets the user's saved initials.
`setUserFonts(userFonts:` sdk.IUserFontData`): void`	Registers custom user fonts.
`setDefaultFont(fontConfig:` ui.IDefaultFontConfig`): void`	Sets the default font for text tools.
`setUserDefaultFont(fontConfig:` ui.IDefaultFontConfig`): void`	Sets the user's preferred default font.
`setUnitsAndGuides(config:` ui.IUnitsAndGuidesConfig`): void`	Updates units and guides settings.
`getOpenDocumentsInNewTab(): boolean`	Returns the "open documents in new tab" setting.
`setOpenDocumentsInNewTab(enabled: boolean): void`	Updates the "open documents in new tab" setting.
`getRestoreLastViewSettings(): boolean`	Returns the "restore last view settings" setting.
`setRestoreLastViewSettings(enabled: boolean): void`	Updates the "restore last view settings" setting.
`getToolsLayout():` ui.LabelAlignment`	Returns the current tools layout (Row / Column).
`setToolsLayout(layout:` {@link ui.LabelAlignment}`): void`	Updates the tools layout (Row / Column).
`getSidebarCollapsed(): boolean`	Returns whether the navigation rail is collapsed.
`setSidebarCollapsed(collapsed: boolean): void`	Collapses or expands the navigation rail.
`getSidebarExpandOnHover(): boolean`	Returns the collapsed rail's hover-peek setting.
`setSidebarExpandOnHover(enabled: boolean): void`	Updates the collapsed rail's hover peek.
`applyUserAppearance(appearance:` {@link ui.FillSignSignatureFieldCreateParams}`, appearanceType:` {@link ui.AppearanceType}`, isSticky?: boolean): void`	Applies a user appearance to a field.
`setDocumentView(documentView:` {@link ui.IDocumentView}`): void`	Sets the active document view.
`setOcrAdvancedConfig(config:` {@link ui.IOcrAdvancedConfig}`): void`	Updates OCR Advanced settings; omitted fields keep their value.
`setUserManagement(config:` {@link ui.IUserManagementConfig}`): void`	Updates the user-management configuration.
`setUserTag(tag: string \| null): void`	Updates the user-management tag.
`setUser(user:` {@link ui.IUserInfo}`): void`	Sets the displayed user info.
`getCurrentUser():` {@link ui.IUserInfo} `\| null`	Returns the signed-in user, or `null`.
`getAccessToken(): Promise<`{@link ui.ISessionTokens} `\| null>`	Returns fresh session tokens — see Sign-in & Cloud Drives.
`login(): Promise<void>`	Starts the sign-in flow.
`revalidateSession(): Promise<boolean>`	Forces a token renewal; `false` means the session was dead and has been cleared.
`onUserChanged(callback): () => void`	Subscribes to sign-in state; returns an unsubscribe function.
`refreshChooseFile(): void`	Re-renders the empty ("home") screen.
`setFullscreenLayout(fullscreen: boolean): void`	Applies or undoes the fullscreen layout.
`destroy(): void`	Cleans up the element and its resources.

PDF Web SDK Documentation