ComPDF
Contact Sales
DemoSampleAPI ReferenceFAQ
、

PDF Generation Template Editor

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

View on GitHub

API Reference ​

The public API is exposed on window.instance after the viewer initializes:

javascript
window.instance = {
  docViewer,                  // underlying ComPDFKitViewer (instance 1)
  Core: { /* engine bridge (~120 functions) */ },
  UI:   { /* UI APIs (~62 functions + Header/Panel/Popup classes) */ },
};

This page lists the instance.UI surface grouped by category. For the engine (instance.Core) surface, see Core Bridge.

Each apis/*.js module is a factory (stores...) => (...args) => result; apis/index.js injects the Pinia stores at registration time. Three deprecated aliases are also exposed: setThemeMode, setActiveToolMode, setActiceToolMode.

Header & Toolbar ​

UI.setHeaderItems(headerCallback) ​

Customize the header / toolbar groups inside a callback. The callback receives a UI.Header instance — a mutable working copy of all header arrays.

UI.Header methods: get(dataElement), getItems(), getHeader(group), insertBefore(item), insertAfter(item), delete(id?), shift(), unshift(...items), push(...items), pop(), update(items) — all chainable, return Header.

javascript
UI.setHeaderItems(header => {
  header.getHeader('default').push({ type: 'actionButton', dataElement: 'myBtn', onClick: () => {} });
});

UI.setToolbarGroup(groupDataElement) ​

Switch the active toolbar group. Groups: toolbarGroup-View, -Annotation, -Form, -Measurement, -Sign, -Security, -Redaction, -Compare, -Editor, -Document, -Separation.

Elements (open / close / enable / disable) ​

APISignatureNotes
openElement(dataElement: string) => voidOpens element; closes sibling panels on the same side.
closeElement(dataElement: string) => void
openElements(dataElements: string[]) => void
closeElements(dataElements: string[]) => void
isElementOpen(dataElement: string) => boolean
disableElements(dataElements: string[] | string) => voidUnmounts from DOM (does not disable the feature).
enableElements(dataElements: string[] | string) => void
setActiveElementTab(dataElement: string, tab: string|number) => voidSwitches the active sub-tab.

Panels ​

UI.addPanel(panel) ​

Add a custom panel. panel = { dataElement, location: 'left'|'right', render: string | () => HTMLElement }.

UI.setPanels(panelList) ​

Replace the entire panel list.

UI.getPanels() → Array<UI.Components.Panel> ​

Returns deep-cloned entries wrapped in Panel instances.

UI.Components.Panel: dataElement (get/set), render (get/set), location (get/set, invalid → 'right'), setLocation(location), delete().

Tools ​

APISignatureNotes
setActiveTool(dataElement: string) => voidActivate a tool by its data-element.
getActiveTool() => object
getTool(tool: string) => objectShallow copy of the tool style preset.
getToolColor(tool: string) => string
registerTool(tool: object, options: object) => booleanRegister a custom annotation tool.

Themes & Styles ​

APISignatureNotes
setTheme(value: string|object) => void'light' / 'dark'.
setCustomStyle(style: string) => voidInjects a <style> into <head>.

Localization ​

APISignatureNotes
setLanguage(language: string) => Promise<void>en, zh-CN, zh-TW, fr, th, ja. Persists to localStorage.
addLanguage(language: object) => void
removeLanguage(language: string) => void
setLanguages(languages: Array|object) => void

Signatures ​

APISignatureNotes
setAutoJumpNextSign(value: boolean) => void
setSignatureDialogTabs(value: Array) => void
setSignatureDialogProperties(type: string, properties: object, replace?: boolean = false) => void
setEnableSignatureTemplates(value: boolean) => void
enableSignatureTool() => void
disableSignatureTool() => void

Stamps ​

APISignatureNotes
setStampPanelTabs(tabs: Array) => void
setImportStamps(images: Array) => void
addCustomStamps(images: Array) => voidPersists to localStorage.
setCustomStamps(stamps: Array) => void
getCustomStamps() => Array

Forms ​

APISignatureNotes
setFormBoardFold(fold: boolean) => void
setFormBoardPosition(position: string|number) => void
setHighlightForm(value: boolean) => voidPushes into core.

Content Editor ​

APISignatureNotes
disableDocumentEditorSave() => void
disableDocumentEditorSaveAs() => void
enableDocumentEditorSave() => void
enableDocumentEditorSaveAs() => void
saveDocumentEditor() => Promise<void>Saves edits and reloads the document.

Modals ​

UI.addCustomModal(options) ​

Register a custom modal. options = { dataElement, disableBackdropClick?, disableEscapeKeyDown?, render?, header, body, footer } where each section is { title, className, style, children }. Same dataElement replaces the prior modal. Controlled via openElement / closeElement / disableElements.

Popups ​

Four properties, each implementing UI.Popup (add(items, dataElement?), update(items?), getItems()):

  • UI.textPopup
  • UI.annotationPopup
  • UI.contentEditorPopup
  • UI.cropPagePopup

Remove items via UI.disableElements.

User / Author ​

APISignatureNotes
setCurrentUser(user: string) => voidFalls back to 'Guest'.
setAnnotator(user: string) => voidSame action as setCurrentUser.
setAuthor(value: string) => voidEmpty string if falsy.
setHighlightLink(value: boolean) => void
getPassword() => stringPassword for the current document.

Fonts ​

APISignatureNotes
setCustomFonts(fonts: Array) => voidErrors if not an array.
getCustomFonts() => Array
setFontSizes(fontSizes: Array) => void
getFontSizes() => Array

Loading ​

APISignatureNotes
setCustomLoading(value: boolean) => void

Annotation Import / Export ​

APISignatureNotes
disableAnnotationExport() => void
enableAnnotationExport() => void
disableAnnotationImport() => void
enableAnnotationImport() => void

Deprecated aliases ​

AliasReplaces
setThemeModesetTheme
setActiveToolModesetToolbarGroup
setActiceToolMode (typo)setToolbarGroup

Each emits [ComPDF] "<name>" is deprecated and will be removed in a future version. Please use "<replacement>" instead. and forwards all arguments.

instance.Core (engine bridge) ​

The full instance.Core surface (~120 functions) is documented in Core Bridge. Commonly used entries:

  • Document: loadDocument, getPagesCount, getCurrentPage, getDocumentName, download, saveDocumentEdit, compare.
  • Navigation: nextPage, previousPage, rotateClockwise, rotateCounterclockwise, zoomIn, zoomOut, scaleChanged, getScale, switchScrollMode, switchSpreadMode, requestFullScreenMode, toggleSidebar, pageToWindow, windowToPage.
  • Search: search, setActiveSearchResult, clearSearchResults, getSelectedText.
  • Annotations: getAnnotationsList, getAnnotationManager, getAnnotationHistoryManager, importAnnotations, exportAnnotations, exportXfdf, selectAnnotation, jumpToAnnotation, setAnnotationStyles, addAnnotationImage, handleReplyAnnotation.
  • Tools: setTool, switchTool, setToolMode, getToolMode, getToolStyles, setToolStyles, registerTool.
  • Forms: handleField, enableSkipNoRequired, disableSkipNoRequired, setAutoJumpNextSign, getRequiredFormSign.
  • Signatures: handleSign, getSignature, deleteSignature, verifySignature, getVerificationResult, loadCertificates, addToTrustedCertificateLists, checkCertificateIsTrusted.
  • Security: checkPermissionPassword, getPermission, setPassword, removePassword, checkPassword.
  • Redaction/flatten: applyRedactions, flattenPdf, flattenPdfDownload.
  • Events: eventBus, addEvent, removeEvent.
  • Users: setCurrentUser, getCurrentUser, isUserAdmin, isReadOnlyModeEnabled.