> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/what-is-webviewer/overview.md).

# Overview of the WebViewer JavaScript PDF and DOCX Library

Discover how WebViewer, a JavaScript library, enables viewing, annotating, and editing PDFs, Office Docs, images, videos, and more formats. Learn about client-side rendering and the option of WebViewe

The WebViewer SDK is expansive, allowing you to do the following with PDFs inside your app:

* View
* Edit
* Annotate
* Flatten
* Extract
* Search
* Build forms
* Calculate using measurements
* Support layers
* Customize the UI
* Meet global accessibility standards through the UI
* Page manipulation
* Compare different versions of a PDF
* Archive
* Use digital signature
* Redact
* Generate templates
* Add security
* Document conversion, including Office and CAD conversion

You can also:

* View and edit in [Spreadsheet Editor ](https://euc-word-edit.officeapps.live.com/web/guides/spreadsheet-editor)for .xlsx files.
* View and edit in [DOCX Editor ](https://euc-word-edit.officeapps.live.com/web/guides/docx-editor)for .docx files.

Adding WebViewer to your application allows users to use PDFs, .xlsx, and .docx files without going outside of your application. This reduces reliance on third-party systems, multiple vendors, and file downloads for everyday tasks without compromising control, compliance, or security.

Interact with our [showcase demo](https://showcase.apryse.com/?_gl=1*aem6fl*_gcl_aw*R0NMLjE3NTMyOTE5OTQuQ2owS0NRandrSUxFQmhEZUFSSXNBTC0tcGp5N1RWUEdxVnlqa2Z3dnptN21lVkttTDZha2JxeVNDYS1oSTZrR3B3bkVqZ21pSmRlM2lXa2FBaXVyRUFMd193Y0I.*_gcl_au*MjA0NDc5Nzg5My4xNzU1NTQ3NDcw*_ga*MTc1OTMwMzcwMy4xNzQ3NzY2OTYy*_ga_S9LESQW29R*czE3NTYxMzUwMTMkbzYxJGcxJHQxNzU2MTU0NzIwJGozNiRsMCRoNTQ4MTI1MDk0) to test out all of the Apryse WebViewer SDK functionality.

WebViewer is a JavaScript library for viewing, annotating, and editing PDFs, Office Documents, images, videos, and other [formats](/web/what-is-webviewer/file-format-support.md). At its simplest, you can view a document by passing a DOM element where WebViewer will be placed inside your app and provide WebViewer a document URL.

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-8cdde4fd1214ea8c2bed088eb3551eb8729ed760%2F9eda085bb00d3944fc7b6b61fdeec7350e20b08f-1537x1079.png?alt=media)

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
WebViewer({
  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf'
}, document.getElementById('viewer')).then(instance => {
  // WebViewer is initialized
});
```

{% endcode %}
{% endtab %}
{% endtabs %}

Behind the scenes, a custom web component instantiates the default WebViewer UI and loads the document. APIs are available to customize the UI and manipulate the viewer and document. Lower level APIs let you create your own viewer or process documents without a UI.

## How does it work?

WebViewer takes advantage of client side technologies like [WebAssembly](https://webassembly.org/) to quickly parse and render PDFs. Apryse's C++ SDK is compiled into a module that can be loaded directly in the browser.

This means that the work of rendering the document is done completely by the browser with no server necessary. A server might be used only to statically host the documents and JavaScript files, but it's also possible to load local files from a user's computer. Having the rendering take place on the client means you don't have to worry about maintaining and scaling servers that do the rendering for you.

PDF, image and Office documents are able to be loaded when using [client rendering](/web/what-is-webviewer/deployment-options.md#client-only).

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-53fa6179bd8e66a6618972d26e5fb1eaadb838f3%2F9f8694edcd90b64485a6a28a26bce6d3d0b906a4-836x857.png?alt=media)

## When client-side is not enough

Client side rendering works well when using modern browsers and reasonably powerful devices but what if a significant portion of your user base is using Internet Explorer or lower-powered mobile devices? Client-side rendering will still work but the performance may not be acceptable for your users.

For these cases we recommend using [WebViewer Server](/web/webviewer-server/wv-server-deployment.md), a drop-in backend for WebViewer that offers responsive viewing and compatibility across all client platforms, along with scaling performance that approaches purely client-side solutions. It works hand-in-hand with WebViewer on the client, initially serving images then transitioning to client-side rendering.

The server runs in a Docker container which is quick and easy to set up for you to try out. Once your server is deployed, you just need to pass an extra constructor option, [`webviewerServerURL`](https://sdk.apryse.com/api/web/global.html#WebViewerOptions__anchor), and the same WebViewer APIs can be used for interacting with the document.

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
WebViewer({
  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
  // demo.apryse.com is for demo purposes only, replace with your own deployed server
  webviewerServerURL: 'https://demo.apryse.com'
}, document.getElementById('viewer')).then(instance => {
  // WebViewer is initialized
});
```

{% endcode %}
{% endtab %}
{% endtabs %}

{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}

```js
WebViewer({
  initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
  // demo.apryse.com is for demo purposes only, replace with your own deployed server
  pdftronServer: 'https://demo.apryse.com'
}, document.getElementById('viewer')).then(instance => {
  // WebViewer is initialized
});
```

{% endcode %}
{% endtab %}
{% endtabs %}

Internally WebViewer will pass the document URL to the server and the server will download and process it. Based on the capability of the client device/browser and properties of the document, WebViewer Server may switch over to client rendering once client modules are loaded, optimize the document for client rendering or continue rendering on the server.

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-755edbfd9168f3c37edb3ec06ed4583abfd10823%2F98653da11858ef5b410ace4cf90d1f6ddad51823-926x734.png?alt=media)

## What if you want more control of the server?

WebViewer Server is provided as a Docker container or a direct Tomcat installer and has [quite a few options](/web/webviewer-server/wv-server-config.md) for configuration, but in some cases it may be preferable to have more control of the server environment. Behind the scenes WebViewer Server uses Apryse's native PDF SDK for rendering and optimizing files and you can take advantage of these same APIs on your own server. The cross platform SDK is available for [Linux](/core/get-started/readme.md), [Windows](/core/get-started/readme.md) and [Mac](/core/get-started/readme.md) in a variety of languages.

Using the Apryse server SDK you can convert many types of documents into web optimized [XPS](https://en.wikipedia.org/wiki/Open_XML_Paper_Specification) files, called XOD, which are able to be quickly rendered by WebViewer in any browser or device. Using XOD files also allows for workflows where you pre-convert your documents for best performance. You can read more on [custom server deployment guide](/web/custom-server/custom-server-deployment.md).

## Supporting more file formats

Besides improved performance, WebViewer Server also provides out of the box support for loading a number of other document formats, including CAD documents. See related guide for a full list of [supported WebViewer document formats](/web/what-is-webviewer/file-format-support.md).

With WebViewer Server all you need to do is pass a URL to one of the supported document types to have it loaded in WebViewer. When using the Apryse SDK on your own server you will need to convert the document to XOD or PDF first.

## Summary

* The [client only](/web/what-is-webviewer/deployment-options.md#client-only) setup will be the simplest to set up and maintain as it only requires a static server to host files and processing is all performed client side in the browser. We generally recommend trying out this option first.
* If you need to support older browsers, lower powered devices or more file formats then [WebViewer Server](/web/webviewer-server/wv-server-deployment.md) is recommended as it simplifies the deployment and handling of documents. All the server requires is a URL to be able to render documents quickly so you don't need to change your existing file storage location.
* If you would like the same benefits as WebViewer Server but would also like more control of the server environment then you can use [custom server deployment](/web/custom-server/custom-server-deployment.md). This requires the use of the server side Apryse SDK to process documents yourself before sending them to WebViewer.

Get stared guides will help you [integrate WebViewer into your app](/web/get-started/readme.md).

Many features are avaliable for you to try out in our [showcase - launch demo](https://showcase.apryse.com).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.apryse.com/web/what-is-webviewer/overview.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.