Getting Started

Foxit PDF SDK for Web is a JavaScript library for embedding PDF viewing and editing in web applications. For product capabilities, architecture details, and use cases, see Foxit PDF SDK for Web overview.

SDK architecture

Foxit PDF SDK for Web uses the same three-layer model as the mobile SDK. See the full architecture description for layer details and use cases.

Layer	Key objects	Role	Typical use
UI Extension (Full UI)	PDFUI	Full application UI	Ship a production-ready web PDF app quickly
PDFViewCtrl (Basic Viewer)	PDFViewer	Viewer control and rendering	Custom UI with SDK rendering and interaction
Core SDK	PDFDoc, PDFPage	Low-level PDF APIs	Custom workflows without bundled UI

NOTE

Foxit PDF SDK for Web, the Android SDK, and the iOS SDK are built on top of Foxit PDF SDK for Desktop/Server. Core SDK indicates low-level PDF operations that work without UI. PDFViewCtrl indicates APIs that depend on the viewer control. UI Extension indicates features provided by the built-in UI components.

Download the SDK

• Get the SDK: Request a trial or download instructions from the Foxit Developer Hub, or contact Foxit technical support or your sales representative for the build that fits your project.
• npm: Visit the SDK package on npm here.

Sample projects

• Local samples: See Examples to build and run sample projects locally and get started with integration.
• Online demo: Try features in the online demo without deploying anything.

Quick integration

Integrate basic Viewer

Integrate full UI

Framework integration

Package layout

Package changes

Before version 10.0, Foxit PDF SDK for Web shipped three package variants:

• Standard package without fonts (FoxitPDFSDKForWeb_x_xxx_NoFonts.zip):
  • Contains no font resources—for teams that already have fonts or rely on online fonts only.
  • Smaller download size.
• Standard package (FoxitPDFSDKForWeb_x_xxx.zip):
  • Includes full font resources for immediate use without extra setup.
  • For teams that do not need a custom font setup and accept a larger package.
• Full package (FoxitPDFSDKForWeb_x_xxx_Full.zip):
  • Adds document compare, advanced editing, dynamic XFA, and other advanced capabilities on top of the standard package.
  • For teams that need those advanced features.

Important update:

Starting with version 10.0, the product ships a single consolidated package:

• Full package (FoxitPDFSDKForWeb_x_xxx.zip):
  • Includes everything from the previous full package plus 3D support.
  • Feature modules load according to your license, so you enable only what you need.
  • This change delivers broader capability with a simpler package model.

Directory structure

Folder / file	Description
docs	API reference and the Foxit PDF SDK for Web developer guide. Note: The HTML developer guide is built with VuePress and cannot be opened by double-clicking a file. Start an HTTP server and open it in a browser. Some interactive samples require WebPDFJRWorker.js and an HTTP-served environment.
examples	Demos and sample projects that show how to use Foxit PDF SDK for Web.
external	Font resources.
lib	Core Foxit PDF SDK for Web libraries.
server	http-server and Node.js scripts used by server-side features in the web viewer.
legal.txt	Legal and copyright information.
package.json	Project metadata.

The lib folder contains:

Folder / file	Description
jr-engine	Client-side rendering engine.
locales	Supported languages; resource files are grouped by locale tag.
PDFViewCtrl	PDFViewCtrl add-on plugins.
stamps	Stamp resources—images and templates.
assets	Template assets for document compare (included in the full package only).
uix-addons	UIExtension add-on plugins.
PDFViewCtrl.css	CSS for PDFViewCtrl viewer UI.
PDFViewCtrl.full.js	Full PDFViewCtrl viewer script (includes dependencies).
PDFViewCtrl.js	PDFViewCtrl viewer script without bundled third-party libraries.
PDFViewCtrl.polyfills.js	Polyfills used by PDFViewCtrl for browser compatibility.
PDFViewCtrl.vendor.js	Third-party libraries used by PDFViewCtrl (see list below).
preload-jr-worker.js	Worker script that preloads the JS engine to speed up viewer startup.
UIExtension.css	Default UIExtension CSS.
UIExtension.dark-variable.css	CSS variables for dark theme.
UIExtension.vw.css	CSS that uses vmin units.
UIExtension.full.js	Full UIExtension viewer script (includes dependencies).
UIExtension.js	UIExtension viewer script without bundled third-party libraries.
UIExtension.polyfills.js	Polyfills used by UIExtension for browser compatibility.
UIExtension.vendor.js	Third-party libraries used by UIExtension (see list below).
WebPDFJRWorker.js	Web Worker script that runs the client-side rendering engine.
WebPDFSRWorker.js	Web Worker script that runs the server-side rendering engine.
*.d.ts	TypeScript declaration files for JavaScript APIs—IDE hints, autocomplete, and compile-time type checks.

Static vs dynamic libraries

• Before v10.0: static library

  • Earlier releases bundled all features into one large .wasm file.
  • Drawback: file size grew with each feature, increasing first-load time.
  • Benefit: after the first load, features did not need to be loaded again.

• From v10.0: dynamic library

  • Features are split into modules compiled separately.
  • First load pulls in the main module only (e.g. rendering), shortening initial load time.
  • Other modules load on demand when used, improving resource use and performance.

Dynamic library modules

Modules are split into a core main module and on-demand side modules.

Core main module:

• gsdk.wasm

Side modules (loaded on demand):

• compare.wasm
• pageeditor.wasm
• touchup.wasm
• xfa.wasm
• 3d.wasm
• lr.wasm
• Pageformat.wasm
• docprocess.wasm
• optimizer.wasm

Module capabilities and dependencies:

Module	Capability	Depends on
gsdk.wasm	Core PDF features and Redact.	None
compare.wasm	Required for Overlay Compare.	lr.wasm
pageeditor.wasm	Paragraph-based editor (advanced paragraph editing).	lr.wasm
touchup.wasm	Edit Text and Add Text in the advanced editor.	lr.wasm
xfa.wasm	Dynamic XFA forms.	lr.wasm
3d.wasm	Display and interact with PDF 3D content.	None
optimizer.wasm	Digital stamp, flatten, and related features.	None
lr.wasm	Layout Recognition engine—loaded when a dependent advanced module is triggered.	None
Pageformat.wasm	Header & Footer and Watermark.	None
docprocess.wasm	Form recognition.	None

Third-party libraries

Foxit PDF SDK for Web ships two JS bundle styles: full builds that include third-party dependencies, and regular builds without them. If your app already includes the same libraries, you do not need to load them again.

PDFViewCtrl.full.js includes:

• PDFViewCtrl.full.js: Full PDFViewCtrl viewer script.
• PDFViewCtrl.polyfills.js: Polyfills for browser compatibility.
• PDFViewCtrl.vendor.js: Third-party libraries (listed below).
• PDFViewCtrl.js: PDFViewCtrl viewer script without bundled third-party libraries.

Therefore, PDFViewCtrl.polyfills.js + PDFViewCtrl.vendor.js + PDFViewCtrl.js = PDFViewCtrl.full.js.

These two approaches are equivalent:

<script src="../FoxitPDFSDKForWeb/lib/PDFViewCtrl.full.js"></script>

and

<script src="../FoxitPDFSDKForWeb/lib/PDFViewCtrl.polyfills.js"></script>
<script src="../FoxitPDFSDKForWeb/lib/PDFViewCtrl.vendor.js"></script>
<script src="../FoxitPDFSDKForWeb/lib/PDFViewCtrl.js"></script>

Third-party libraries in PDFViewCtrl.vendor.js:

jquery
i18next
i18next-chained-backend
i18next-localstorage-backend
i18next-xhr-backend
jquery-contextmenu
dialog-polyfill
hammerjs
eventemitter3

UIExtension.full.js includes:

• UIExtension.full.js: Full UIExtension viewer script.
• UIExtension.polyfills.js: Polyfills for browser compatibility.
• UIExtension.vendor.js: Third-party libraries (listed below).
• UIExtension.js: UIExtension viewer script without bundled third-party libraries.

Therefore, UIExtension.polyfills.js + UIExtension.vendor.js + UIExtension.js = UIExtension.full.js.

These two approaches are equivalent:

<script src="../FoxitPDFSDKForWeb/lib/UIExtension.full.js"></script>

and

<script src="../FoxitPDFSDKForWeb/lib/UIExtension.polyfills.js"></script>
<script src="../FoxitPDFSDKForWeb/lib/UIExtension.vendor.js"></script>
<script src="../FoxitPDFSDKForWeb/lib/UIExtension.js"></script>

Third-party libraries in UIExtension.vendor.js:

jquery
i18next
i18next-chained-backend
i18next-localstorage-backend
i18next-xhr-backend
dialog-polyfill
hammerjs
eventemitter3
file-saver