> 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/usage.md).
# Standard API for WebViewer
Discover how WebViewer's standard API simplifies trying out different deployment options with minimal code changes. Learn about Core and UI namespaces, PDFNet exceptions, and next steps for loading do
WebViewer provides a standard API that works the same way for any of the [deployment options](/web/what-is-webviewer/deployment-options.md). This allows you to easily try out different WebViewer deployment options with minimal code changes.
## WebViewer instance
The WebViewer initializer gives you an [instance object](https://sdk.apryse.com/api/web/WebViewerInstance.html) that provides a number of [functions](https://sdk.apryse.com/api/web/WebViewerInstance.html#toc15__anchor) and [objects](https://sdk.apryse.com/api/web/WebViewerInstance.html#toc3__anchor). The standard API is a combination of the [default WebViewer UI](/web/ui-customization/modular-ui/getting-started.md) APIs and the [WebViewer Core](/web/ui-customization/core.md) APIs.
{% tabs %}
{% tab title="JavaScript" %}
{% code lineNumbers="true" %}
```js
WebViewer({
path: '...',
}, document.getElementById('viewer'))
.then(instance => {
const { UI, Core } = instance;
});
```
{% endcode %}
{% endtab %}
{% endtabs %}
## Core Namespace
The `Core` namespace contains classes and objects for working with the document viewer and documents in WebViewer. Of the many objects and classes within this space, `documentViewer` and `annotationManager` are commonly used objects that will allow you to work with the document and annotations.
{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}
```js
WebViewer({
// options here
}, document.getElementById('viewer'))
.then(instance => {
// WebViewer Core APIs
const { documentViewer, annotationManager } = instance.Core;
documentViewer.addEventListener('documentLoaded', () => {
instance.UI.openElements(['notesPanel']);
});
documentViewer.addEventListener('annotationsLoaded', () => {
const annots = annotationManager.getAnnotationsList();
annots.forEach((annot) => {
if (annot.PageNumber === 1) {
// Do something
}
});
});
iinstance.UI.loadDocument('...');
});
```
{% endcode %}
[WebViewer Options](https://sdk.apryse.com/api/web/global.html#WebViewerOptions__anchor) [DocumentViewer#documentLoaded](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:documentLoaded) [DocumentViewer#annotationsLoaded](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:annotationsLoaded) [DocumentViewer.loadDocument](https://sdk.apryse.com/api/web/UI.html#.loadDocument) [UI.openElements](https://sdk.apryse.com/api/web/UI.html#.openElements) [DocumentViewer.getAnnotationManager](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getAnnotationManager)
{% endtab %}
{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}
```js
WebViewer({
// options here
}, document.getElementById('viewer'))
.then(instance => {
// WebViewer Core APIs
const docViewer = instance.docViewer;
const annotManager = instance.annotManager;
docViewer.on('documentLoaded', () => {
instance.openElements(['notesPanel']);
});
docViewer.on('annotationsLoaded', () => {
const annots = annotManager.getAnnotationsList();
annots.forEach((annot) => {
if (annot.PageNumber === 1) {
// Do something
}
});
});
instance.loadDocument('...');
});
```
{% endcode %}
[WebViewer Options](https://sdk.apryse.com/api/web/global.html#WebViewerOptions__anchor) [DocumentViewer#documentLoaded](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:documentLoaded) [DocumentViewer#annotationsLoaded](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#event:annotationsLoaded) [DocumentViewer.loadDocument](https://sdk.apryse.com/api/web/UI.html#.loadDocument) [UI.openElements](https://sdk.apryse.com/api/web/UI.html#.openElements) [DocumentViewer.getAnnotationManager](https://sdk.apryse.com/api/web/Core.DocumentViewer.html#getAnnotationManager)
{% endtab %}
{% endtabs %}
Some other notable namespaces that you can find under `Core` are:
* [Annotations](https://sdk.apryse.com/api/web/Core.Annotations.html)
* [Tools](https://sdk.apryse.com/api/web/Core.Tools.html)
* [Search](https://sdk.apryse.com/api/web/Core.Search.html)
* [Math](https://sdk.apryse.com/api/web/Core.Math.html)
## UI Namespace
The `UI` namespace hosts APIs, objects, and classes in working with the WebViewer UI. Many of the customizations are available through the APIs found within this namespace.
{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}
```js
WebViewer({
// options here
}, document.getElementById('viewer'))
.then(instance => {
// WebViewer UI APIs
instance.UI.setHeaderItems(header => {
header.push({
type: 'actionButton',
img: '',
onClick: () => {
// save the annotations
}
});
});
instance.UI.setTheme('dark');
instance.UI.setLanguage('es');
instance.UI.loadDocument('...');
});
```
{% endcode %}
[UI.setHeaderItems](https://sdk.apryse.com/api/web/UI.html#.setHeaderItems) [UI.setTheme](https://sdk.apryse.com/api/web/UI.html#.setTheme) [UI.setLanguage](https://sdk.apryse.com/api/web/UI.html#.setLanguage)
{% endtab %}
{% tab title="JavaScript (SDK v6.0+)" %}
{% code lineNumbers="true" %}
```js
WebViewer({
// options here
}, document.getElementById('viewer'))
.then(instance => {
// WebViewer UI APIs
instance.setHeaderItems(header => {
header.push({
type: 'actionButton',
img: '',
onClick: () => {
// save the annotations
}
});
});
instance.setTheme('dark');
instance.setLanguage('es');
instance.loadDocument('...');
});
```
{% endcode %}
[UI.setHeaderItems](https://sdk.apryse.com/api/web/UI.html#.setHeaderItems) [UI.setTheme](https://sdk.apryse.com/api/web/UI.html#.setTheme) [UI.setLanguage](https://sdk.apryse.com/api/web/UI.html#.setLanguage)
{% endtab %}
{% endtabs %}
If you would like to learn more about the UI in WebViewer, feel free to check out our [guides on the UI](/web/ui-customization/ui-customization.md).
## Exceptions
The [PDFNet namespace](https://sdk.apryse.com/api/web/WebViewerInstance.html#PDFNet__anchor) is the main exception and is also known as the full API. See [this guide](/web/full-api/full-api-overview.md) for more information about what it is and why you might want to use it. It will only be fully available when the full API is enabled via the WebViewer instance.
The permanent [page manipulation APIs](/web/get-started/guides/page-manipulation.md) on the [Document object](https://sdk.apryse.com/api/web/Core.Document.html) and the [applyRedactions function on AnnotationManager](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#applyRedactions__anchor) are only available in [client only mode](/web/what-is-webviewer/deployment-options.md#client-only) or with WebViewer Server. To achieve similar functionality with a [custom server](/web/custom-server/custom-server-deployment.md) you would do the processing on the server side and reconvert the file.
## Next steps
To get started with loading your documents, please check out our [document loading guide](/web/open-save-document/basics.md).
---
# 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/usage.md?ask=&goal=
```
`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.