Foxit Developer

Sample projects overview ​

UIExtension ​

Complete webViewer ​

A ready-to-run application with the full SDK feature set. Run it as-is or fold it into your project. It uses UIExtension.full.js for viewing and parsing.

Source path: /examples/UIExtension/complete_webViewer.

Integration samples ​

Shows how to integrate the SDK as ES module, AMD, or CommonJS. For global variable integration, see /examples/UIExtension/complete_webViewer/index.html.

Source path: /examples/UIExtension/integrate-as-module.

Custom global annotation properties ​

Shows how to set default annotation properties via constructor options or functions.

Source path: /examples/UIExtension/default_annot_config.

Custom tooltips ​

Shows how to customize tooltips on the sidebar and toolbar.

Source path: /examples/UIExtension/tooltip.

Async / sync comment loading ​

Shows how the lazy attribute (true or false) on <commentlist-sidebar-panel> loads PDF comments asynchronously or synchronously.

Source path: /examples/UIExtension/commentlist-loadmode.

Custom text selection ​

Shows how to build a custom control for text selection.

Source path: /examples/UIExtension/custom-text-selection-tool.

Custom annotation popup ​

Double-tapping an annotation in webViewer normally opens the comment panel. This sample adds a popup layer and overrides onDoubleTap.

Source path: /examples/UIExtension/custom_annotations_popup.

Custom UI ​

Shows UI customization—including a non-responsive PC layout sample and adaptive layout for cross-browser use. WebViewer reads navigator.userAgent at init and picks PC or mobile UI.

Source path: /examples/UIExtension/custom_appearance.

Customize layout with templates ​

Introduces built-in UIExtension templates and reference patterns for fine-tuning layout.

Source path: /examples/UIExtension/layout_templates.

Customize components with fragments ​

Shows how to change components and configuration through fragments.

Source path: /examples/UIExtension/fragment_usage.

Annotation data migration ​

Migrates annotation JSON from v6 to v7 to avoid data loss.

Source path: /examples/UIExtension/migrateAnnotData.

PWA sample ​

Demonstrates a progressive web app.

Source path: /examples/UIExtension/pwa.

UI widgets samples ​

Examples referenced from the API manual for UIExtension.components.widget—parameters, events, and usage per component.

Source path: /examples/UIExtension/tutorials/widgets.

Add-on usage ​

Shows how to bundle an addon and reference merged-add.js.

Source path: /examples/UIExtension/use-merged-addon.

Custom annotation tooltip ​

Annotation Tooltip is the floating box when the pointer hovers an Annotation. This sample customizes content, position, and show/hide behavior via AnnotTooltip.

Source path: /examples/UIExtension/custom_annotations_tooltip/index.html.

Set digital stamp identity ​

Shows DigitalStampUIXAddon.setIdentityInfo to configure identity information.

Source path: /examples/UIExtension/custom-digital-identity.

Preload custom fonts ​

Shows how to configure and load custom fonts for opened documents.

Source path: /examples/UIExtension/custom-font/index.html.

Custom area measurement tool ​

Shows a custom StateHandler that creates a rectangular area measurement tool.

Source path: /examples/UIExtension/custom-measurement/index.js.

Custom progress bar ​

Shows a custom progress bar for updates before opening or after closing a document.

Source path: /examples/UIExtension/custom-percentage-process/index.html.

Custom redaction creation tool ​

Shows a custom StateHandler that selects text and creates Redact annotations from the selection rectangles.

Source path: /examples/UIExtension/custom-redaction/index.js.

Signature workflow ​

End-to-end signing: preset images, drawing, signing, verification, and related steps.

Source path: /examples/UIExtension/custom-signature-flow/index.js.

PDFViewCtrl ​

Basic webViewer ​

A minimal webViewer that loads a PDF via the SDK API and supports zoom in/out. Uses PDFViewCtrl.full.js from lib.

Source path: /examples/PDFViewCtrl/basic_webViewer.

Override PDFPageRendering ​

While rendering pages, override PDFPageRendering to inject custom UI on each page node—e.g. a spinner or progress indicator.

Source path: /examples/PDFViewCtrl/override-rendering.

Preload worker ​

Preloads the jr engine worker script to reduce initialization time.

Source path: /examples/PDFViewCtrl/preload-worker.

Async loading from URL ​

Opens a file asynchronously from a URL.

Source path: /examples/PDFViewCtrl/url.

Offline mode ​

Registers service-worker.js under examples/PDFViewCtrl/service-worker to cache gsdk.js and fonts in supporting browsers—faster reopen and offline use.

Source path: /examples/PDFViewCtrl/service-worker.

Embedded DIV ​

Renders the SDK’s simple UI inside a sized div container.

Source path: /examples/PDFViewCtrl/div.

FileOpen plugin ​

Opens a document protected with fileOpen.

Source path: /examples/PDFViewCtrl/fileopen.

Page layout override ​

Builds a single-page view layout and navigates with up/down arrows without scrolling. Shows how to register and extend IViewMode for custom layout and navigation.

Source path: /examples/PDFViewCtrl/view-mode.

Re-encrypted document password ​

Opens a password re-encrypted document. The Node.js helper lives under ...\server\encrypt-password.

Source path: /examples/PDFViewCtrl/encrypt-password.

Page operations ​

Demonstrates page-level operations.

Source path: /examples/PDFViewCtrl/ppo.

Add form widgets ​

Creates supported form widgets.

Source path: /examples/PDFViewCtrl/add-form-fields.

Create annotations ​

Extends StateHandler for link, screen, and textMarkup annotations to implement creation handlers.

Source path: /examples/PDFViewCtrl/create-annot.

License validation tool ​

Utility to validate a license.

Source path: /examples/PDFViewCtrl/check-license.

Screen reader ​

Sample code for screen readers to read PDF text.

Source path: /examples/PDFViewCtrl/accessibility/read-content/index.html.

Custom PageCustomRender ​

Uses custom PageCustomRender to control whether pages render and to inject content into page DOM nodes.

Source path: /examples/PDFViewCtrl/load-before-rendering/index.html.

Multiple instances ​

Creates multiple PDFViewer instances on one page with PDFViewCtrl.

Source path: /examples/PDFViewCtrl/multiple-case/index.html.

Compare image pixel differences ​

A React sample that computes and displays per-page pixel differences.

Source path: /examples/PDFViewCtrl/overlay-comparison/.

Note

Unlike most samples, this one must be built before running. See /examples/PDFViewCtrl/overlay-comparison/READMME.md.

Text search ​

Uses PDFDoc.getTextSearch to find text and display results.

Source path: /examples/PDFViewCtrl/text-search/.