API Reference
The public API is exposed on window.instance after the viewer initializes:
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/*.jsmodule is a factory(stores...) => (...args) => result;apis/index.jsinjects 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.
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)
| API | Signature | Notes |
|---|---|---|
openElement | (dataElement: string) => void | Opens 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) => void | Unmounts from DOM (does not disable the feature). |
enableElements | (dataElements: string[] | string) => void | |
setActiveElementTab | (dataElement: string, tab: string|number) => void | Switches 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
| API | Signature | Notes |
|---|---|---|
setActiveTool | (dataElement: string) => void | Activate a tool by its data-element. |
getActiveTool | () => object | |
getTool | (tool: string) => object | Shallow copy of the tool style preset. |
getToolColor | (tool: string) => string | |
registerTool | (tool: object, options: object) => boolean | Register a custom annotation tool. |
Themes & Styles
| API | Signature | Notes |
|---|---|---|
setTheme | (value: string|object) => void | 'light' / 'dark'. |
setCustomStyle | (style: string) => void | Injects a <style> into <head>. |
Localization
| API | Signature | Notes |
|---|---|---|
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
| API | Signature | Notes |
|---|---|---|
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
| API | Signature | Notes |
|---|---|---|
setStampPanelTabs | (tabs: Array) => void | |
setImportStamps | (images: Array) => void | |
addCustomStamps | (images: Array) => void | Persists to localStorage. |
setCustomStamps | (stamps: Array) => void | |
getCustomStamps | () => Array |
Forms
| API | Signature | Notes |
|---|---|---|
setFormBoardFold | (fold: boolean) => void | |
setFormBoardPosition | (position: string|number) => void | |
setHighlightForm | (value: boolean) => void | Pushes into core. |
Content Editor
| API | Signature | Notes |
|---|---|---|
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.textPopupUI.annotationPopupUI.contentEditorPopupUI.cropPagePopup
Remove items via UI.disableElements.
User / Author
| API | Signature | Notes |
|---|---|---|
setCurrentUser | (user: string) => void | Falls back to 'Guest'. |
setAnnotator | (user: string) => void | Same action as setCurrentUser. |
setAuthor | (value: string) => void | Empty string if falsy. |
setHighlightLink | (value: boolean) => void | |
getPassword | () => string | Password for the current document. |
Fonts
| API | Signature | Notes |
|---|---|---|
setCustomFonts | (fonts: Array) => void | Errors if not an array. |
getCustomFonts | () => Array | |
setFontSizes | (fontSizes: Array) => void | |
getFontSizes | () => Array |
Loading
| API | Signature | Notes |
|---|---|---|
setCustomLoading | (value: boolean) => void |
Annotation Import / Export
| API | Signature | Notes |
|---|---|---|
disableAnnotationExport | () => void | |
enableAnnotationExport | () => void | |
disableAnnotationImport | () => void | |
enableAnnotationImport | () => void |
Deprecated aliases
| Alias | Replaces |
|---|---|
setThemeMode | setTheme |
setActiveToolMode | setToolbarGroup |
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.
Related
- Core Bridge — full engine surface.
- UI Customization — task-oriented entry points.
- Architecture — how
UI/Core/docViewerare assembled.