When your web app requires PDF editing capability, a JavaScript PDF Editor SDK is what you need. Whether you’re using a frontend framework like React, Angular or Vue, or a backend JavaScript framework such as Node and Next.js, providing robust PDF editing functionality, web applications for processing insurance forms, health records, engineering documents, or document submissions gives users a better, more unified experience.

In this article, you’ll find answers on how to choose the right JavaScript PDF Editor solution, and how to get started with our solution, WebViewer SDK.

Prefer a Video Tutorial? Watch How to integrate Apryse WebViewer in JavaScript, React, Vue, Angular, and More

Developers may consider open-source libraries, commercial SDKs and managed API services to meet PDF editing needs. Let’s look at some key considerations for each of these options.

Check out the Apryse SDK PDF Editing Demo

Should you choose to build your PDF editor with an open-source library, an SDK, a commercial API? To find the right fit for your project, consider the feature requirements of your project, such as:

Compare document SDK features, including features such as editing, annotation and forms, below.

Find this comparison table here (Current as of 2025).

As a JavaScript developer, you’re probably familiar with PDF Viewer libraries such as PDF.js and PDF-Lib. However, not all PDF viewing or rendering libraries support WYSIWYG editing. For example:

Using an API to embed a well-known PDF software solution such as Adobe into your web app may seem appealing based on familiarity, ease of integration, and features. However, using an API comes with drawbacks that make an SDK a preferable solution for some use cases.

It’s worth noting that because Apryse is a trusted document SDK, some PDF software solutions that offer this type of API may use Apryse SDK to provide their document processing functionality anyway.

While there are many options available to developers to implement PDF editing in a JavaScript web app, only Apryse offers:

For robust WYSIWYG editing with high-fidelity, WCAG 2.2 accessible rendering and easy extensibility for additional document features down the line, try WebViewer. It's built to run in the browser for easy integration with a number of JavaScript frameworks.

Here’s how to get started with your free trial. Visit the documentation page for step-by-step guide, sample code and your trial license key. You can use the links on this page to find the integration steps specific to your framework.

To integrate WebViewer via NPM, you’ll need to install Node and npm, create a folder for your project, open a code editor like Visual Studio Code, and get your Apryse trial key by following the documentation link above.

Run the following command on the command line from your project directory to install WebViewer into your project:

This will download the assets required to use WebViewer.

1. Create a folder in your project named public where we'll store the code as part of your project.

2. Within the new public folder, create a file named index.html.

1. Create a subfolder within the new public folder you created and name it lib/webviewer.

2. Next, copy specific static assets required for WebViewer. The static files to copy are located in node_modules/@pdftron/webviewer/public in your project and are as follows:

3. Paste the select files you copied to the new lib/webviewer public location that will be served via HTTP/HTTPS.

Copy the HTML below and paste it into your index.html file in your project. Two essential things to take note of in the HTML are that:

The script tag must reference the path of the JS file you copied into the public folder you created.

The div element viewer id is where WebViewer will be mounted. In this example it also contains styling elements for the viewer, though you could do so using CSS if you prefer.

Next, you'll copy and paste in the script tag that includes the WebViewer constructor.

Copy, then paste the script below into the index.html file in your project after the div and before the close body tag.

Add the relative location of where you pasted the static files core, ui, and webviewer.min.js, using the path parameter.

Add your own license key in place of 'YOUR_LICENSE_KEY'. If you've created your license key and you're logged in, your key is already in the code below.

Specify an initial document to open when WebViewer starts using the initialDoc parameter.

Specify the id of the element where you want WebViewer to be mounted. In this case, that's viewer.

Starting in version 11, WebViewer instantiates using a web component instead of an iframe by default; however, both methods are available. See this guide for more information. In this article, web component details are provided.

For example, if you copied the static files into public/lib/webviewer, your code would look something like this:

After you've saved all of the files, you'll serve the webpage so you can see the WebViewer UI and the PDF you included to open in WebViewer. We'll use http-server to view the webpage in this example.

Run the following command on the command line from your project directory to run http-server which is a simple web server.

Click the localhost link created in your terminal to view the WebViewer UI and PDF file locally.

Now that you have WebViewer up and running in the browser, you can use this sample code to check out the PDF editing capabilities:

Find more information about PDF editing features in our documentation.

There are a lot of options available to developers for building PDF editing capability. However, many of these options compromise on essentials like high-fidelity rendering, advanced editing features such as headers, footers and images, and dependencies.

Choosing Apryse SDK sets your application up for success, now and into the future as your document processing requirements grow.

To learn more about what Apryse WebViewer can do, check out the PDF Editing demo.

If you have any questions, contact us.