DemoSampleAPI ReferenceFAQ

PDF Generation Template Editor

Open-source visual PDF generation engine with customizable templates and developer-friendly APIs.

View on GitHub

UI Customization ​

The ComPDFKit WebViewer UI is fully customizable. This page is the hub for the most common customization tasks. Each linked guide goes deeper with API signatures and examples.

The public customization surface lives on instance.UI after the viewer initializes:

javascript
const { UI } = window.instance;

Customization at a glance ​

TaskAPIGuide
Add / remove / reorder toolbar buttonsUI.setHeaderItems(callback)Header & Toolbar
Switch the active toolbar groupUI.setToolbarGroup(group)Header & Toolbar
Add a custom left/right panelUI.addPanel(panel)Panels
Replace all panelsUI.setPanels(panels)Panels
Open / close a panel or dialogUI.openElement / UI.closeElementShow / Hide Elements
Hide / show buttons (unmount from DOM)UI.disableElements / UI.enableElementsShow / Hide Elements
Switch themeUI.setTheme('dark')Themes & Styles
Inject custom CSSUI.setCustomStyle(css)Themes & Styles
Switch languageUI.setLanguage('zh-CN')Localization
Add a languageUI.addLanguage(lang)Localization
Register a custom modalUI.addCustomModal(options)Custom Modals
Customize context menusUI.annotationPopup, UI.textPopup, …Popups
Activate a toolUI.setActiveTool(dataElement)Tools
Register a custom toolUI.registerTool(tool, options)Tools

The element model ​

Almost every visible piece of the UI — panels, dialogs, toolbar buttons — is identified by a data-element string. These identifiers are centralized in packages/webview/src/constants/dataElements.js and used as keys throughout the Pinia stores (activeElements, disabledElements, activeElementsTab).

This means three families of APIs control visibility:

  • Open / close (openElement, closeElement) — toggles whether an element is currently shown (e.g. open the left panel).
  • Enable / disable (enableElements, disableElements) — mounts or unmounts the element from the DOM entirely. Disabling a toolbar button removes it; it does not disable the underlying feature.
  • Active tab (setActiveElementTab) — switches the active sub-tab inside a tabbed element (e.g. which left-panel tab is shown).

See Show / Hide Elements for details.

The toolbar model ​

The toolbar is defined declaratively in the headers state of the viewer store — a map of toolbar group → item-array. Groups include default (the main top bar) and toolbarGroup-View, toolbarGroup-Annotation, toolbarGroup-Form, toolbarGroup-Measurement, toolbarGroup-Sign, toolbarGroup-Security, toolbarGroup-Redaction, toolbarGroup-Compare, toolbarGroup-Editor, toolbarGroup-Document, and toolbarGroup-Separation.

Each item is a descriptor with a type (toolButton, actionButton, toggleElementButton, statefulButton, customElement, divider, spacer), a dataElement, an icon, and an onClick(viewerStore, documentStore) handler. UI.setHeaderItems(callback) hands you a mutable Header object with a chainable DSL (get, getHeader, insertBefore, insertAfter, delete, push, pop, unshift, shift, update) to mutate these arrays.

See Header & Toolbar.

The panel model ​

Panels are rendered through a generic Panel.vue shell and declared in the viewer store's genericPanels list. The default set includes leftPanel, rightPanel, stylePanel, pageModePanel, stampPanel, linkPanel, contentEditorPanel, colorSeparationPanel, and redactionPanel. Custom panels added via UI.addPanel render through the same shell, with a render function returning an HTMLElement.

See Panels.

Common recipes ​

Hide the print and download buttons ​

javascript
UI.disableElements(['printButton', 'downloadButton']);

Open the left panel on the thumbnails tab ​

javascript
UI.openElement('leftPanel');
UI.setActiveElementTab('leftPanel', 'ThumbnailsButton'); // THUMBS tab

Add a custom toolbar button ​

javascript
UI.setHeaderItems(header => {
  header.getHeader('default').push({
    type: 'actionButton',
    dataElement: 'my-export-btn',
    label: 'Export',
    onClick: () => { /* … */ },
  });
});

Switch to dark theme and Chinese ​

javascript
UI.setTheme('dark');
UI.setLanguage('zh-CN');

Add a custom right-side panel ​

javascript
UI.addPanel({
  dataElement: 'myPanel',
  location: 'right',
  render: () => {
    const el = document.createElement('div');
    el.textContent = 'Hello from my panel';
    return el;
  },
});
UI.openElement('myPanel');

Advanced customization ​

Because the full UI source is open, you can go beyond the runtime APIs: fork the repository and modify components, stores, or the toolbar definition directly. The Components and State Management guides describe the internal structure you would touch.

Next steps ​