> 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/migration-guides/migrating-to-v11/migrating-to-v11.md).

# Migrate to V11 of WebViewer

Learn about the breaking changes and deprecated APIs when migrating to v11 from older versions of Modular UI WebViewer. Discover the flexibility of the new Modular UI, now default, and how to use Web

There are a few **breaking changes** and other deprecated APIs when migrating to v11 from older versions.

## Modular UI

WebViewer is now using the new [Modular UI](/web/ui-customization/modular-ui/getting-started.md) by default. The Modular UI is very flexible and allows for more customization as well as the ability to import and export UI configs. More details can be found in the [Migrating to Modular UI guide](/web/migration-guides/migrating-to-v11/migrating-to-v11-modular-ui.md).

The previous UI is still available and can be used by setting the `ui` option to `legacy` in the WebViewer constructor.

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

```js
WebViewerConstructor(
  {
    path: '/path/to/your/webviewer',
    initialDoc: '/path/to/your/document.pdf',
    ui: 'legacy',
  },
  document.getElementById('viewer')
).then(instance => {

});
```

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

## Web Component

Starting in version 11 WebViewer will be instantiated in a Web Component by default instead of an iframe. This change will affect how you interact with the WebViewer DOM and apply CSS styles.

While Web Component is now the default way to instantiate WebViewer, you can still use an iframe by replacing the `WebViewer` function with `WebViewer.Iframe` and it will work as it did before.

<pre class="language-js" data-line-numbers><code class="lang-js">import WebViewer from '@pdftron/webviewer'

WebViewer.Iframe({
  path: '/public/webviewer',
  licenseKey: '<code class="expression">visitor.claims.wvKey || "YOUR_LICENSE_KEY"</code>',
}, document.getElementById('viewer'))
  .then(instance => {

  })
</code></pre>

For more information on these changes, please refer to the following guide: [Running WebViewer as a Web Component](/web/ui-customization/web-component-vs-iframe.md).

## Form Builder

There are a few breaking changes to the Form Builder experience when migrating to v11 from older versions. More details can be found in the [Migrating to v11 Form Builder guide](/web/migration-guides/migrating-to-v11/migrating-to-v11-form-builder.md).

## APIs removed

Previously deprecated APIs that have been removed:

### FormFieldCreationManager

* `FormFieldCreationManager.setFieldFlag` has been removed, please use [WidgetAnnotation.setFieldFlag](https://sdk.apryse.com/api/web/Core.Annotations.WidgetAnnotation.html#setFieldFlag__anchor)
* `FormFieldCreationManager.setFieldValue` has been removed, please use [WidgetAnnotation.setValue](https://sdk.apryse.com/api/web/Core.Annotations.WidgetAnnotation.html#setValue__anchor)
* `FormFieldCreationManager.setFieldOptions` has been removed, please use [WidgetAnnotation.setFieldOptions](https://sdk.apryse.com/api/web/Core.Annotations.WidgetAnnotation.html#setFieldOptions__anchor)
* `FormFieldCreationManager.getFieldFlag` has been removed, please use [WidgetAnnotation.getFieldFlags](https://sdk.apryse.com/api/web/Core.Annotations.WidgetAnnotation.html#getFieldFlags__anchor)
* `FormFieldCreationManager.getFieldName` has been removed, please use [WidgetAnnotation.getFieldName](https://sdk.apryse.com/api/web/Core.Annotations.WidgetAnnotation.html#getFieldName__anchor)
* `FormFieldCreationManager.getFieldValue` has been removed, please use [WidgetAnnotation.getValue](https://sdk.apryse.com/api/web/Core.Annotations.WidgetAnnotation.html#getValue__anchor)
* `FormFieldCreationManager.getFieldOptions` has been removed, please use [WidgetAnnotation.getFieldOptions](https://sdk.apryse.com/api/web/Core.Annotations.WidgetAnnotation.html#getFieldOptions__anchor)
* `FormFieldCreationManager.getWidgetFromPlaceholder` has been removed, placeholders are no longer utilized.
* `FormFieldCreationManager.applyFormFields` has been removed, fields no longer need to be applied.
* `FormFieldCreationManager.getWidgetFromPlaceholder` has been removed, placeholders are no longer utilized.

### Annotations

* `Core.Annotations.Annotation.isFormFieldPlaceholder` has been removed, placeholders are no longer utilized.
* `Core.Annotations.Annotation.getFormFieldPlaceholderType` has been removed, placeholders are no longer utilized.
* `Core.Annotations.Annotation.getFormFieldPlaceHolderType` has been removed, placeholders are no longer utilized.
* The `ImageData` property on `Core.Annotations.StampAnnotation` has been removed. Please use the `getImageData` and `setImageData` functions instead.
* The `annot` property on `Core.Annotations.SignatureWidgetAnnotation` has been removed. Please use the `getAssociatedSignatureAnnotation` and `setAssociatedSignatureAnnotation` functions instead.

### Document

* `Document.getLinks` API has been removed, and no longer supported in any document type. Please use [AnnotationManager.getAnnotationsList](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#getAnnotationsList__anchor) and filter annotations of type [Annotations.Link](https://sdk.apryse.com/api/web/Core.Annotations.Link.html)

### setStyles parameter change

The `Core.Tools.Tool` function [setStyles](https://sdk.apryse.com/api/web/Core.Tools.Tool.html#setStyles) previously accepted either an object or a function as a parameter. It now only accepts an object with the properties to be set; it no longer accepts a function.

### MultiViewerMode / SideBySideView

* `Feature.SideBySideView` has been removed use [instance.UI.enterMultiViewerMode](https://sdk.apryse.com/api/web/UI.html#.enterMultiViewerMode__anchor) and [instance.UI.exitMultiViewerMode()](https://sdk.apryse.com/api/web/UI.html#.exitMultiViewerMode__anchor) instead.
* `Feature.MultiViewerMode` has been changed to only enable the button in the view controls flyout rather than enter MultiViewerMode right away. To enter/exit the mode use [instance.UI.enterMultiViewerMode](https://sdk.apryse.com/api/web/UI.html#.enterMultiViewerMode__anchor) and [instance.UI.exitMultiViewerMode()](https://sdk.apryse.com/api/web/UI.html#.exitMultiViewerMode__anchor) instead.

### SignatureCreateTool

By default the SignatureCreateTool will now sign all widgets using appearances. Signing with an annotation will still be supported. For more information on these two methods of signing and how to switch between them, please refer to the following guide: [Signing with Appearances](/web/digital-signature/interacting-with-signature-field.md#signing-with-annotation-vs-signing-with-appearance).

{% hint style="info" %}
Signature fields signed with an e-signature appearance may not be visible in Adobe with form field highlighting turned on.
{% endhint %}

* The `annot` property has been removed. Please use [getFullSignatureAnnotation](https://sdk.apryse.com/api/web/Core.Tools.SignatureCreateTool.html#getFullSignatureAnnotation__anchor) or [getInitialsAnnotation](https://sdk.apryse.com/api/web/Core.Tools.SignatureCreateTool.html#getInitialsAnnotation__anchor) instead to get the annotation associated with the full signature and initials respectively.
* The `ctx` property has been removed. Please use the `signatureDrawingCanvases` property instead.

### AnnotationManager.addAnnotation `autoFocus` option

Previously, if the `autoFocus` option for the [addAnnotation](https://sdk.apryse.com/api/web/Core.AnnotationManager.html#addAnnotation) API was not specified, the annotation would automatically focus for editing after being added. In version 11, the `autoFocus` option will default to **false**. To retain the previous behavior, developers will now need to explicitly set `autoFocus: true` when calling `addAnnotation`.

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

```sh
annotationManager.addAnnotation(myFreeText); // autoFocus is now false by default
annotationManager.addAnnotation(myFreeText, { autoFocus: true }); // enables autoFocus
```

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

### Core

* `Core.SetCachingLevel` has been removed. Please use `Core.setCachingLevel` instead.
* `Core.SetPreRenderLevel` has been removed. Please use `Core.setPreRenderLevel` instead.

### UI

On the `instance.UI` namespace the following functions were removed:

* `setActiveHeaderGroup` instead use new [UI customization guide](/web/ui-customization/modular-ui/containers.md)
* `disableAnnotations`, `disableDownload`, `disableFilePicker`, `disableLocalStorage`, `disableMeasurement`, `disableNotesPanel`, `disablePrint`, `disableRedaction`, `disableTextSelection`, `disableTouchScrollLock` (as well as the `enable` versions)
  * Instead use `instance.UI.disableFeatures` or `instance.UI.enableFeatures` with the corresponding `instance.UI.Feature` constant.
* `getAnnotationUser`, instead use `Core.annotationManager.getCurrentUser`
* `getCurrentPageNumber`, instead use `Core.documentViewer.getCurrentPage`
* `getPageCount`, instead use `Core.documentViewer.getPageCount`
* `getShowSideWindow` and `getSideWindowVisibility`, instead use `UI.isElementOpen('leftPanel')`
* `goToFirstPage`, instead use `Core.documentViewer.setCurrentPage(1)`
* `goToLastPage`, instead use `Core.documentViewer.setCurrentPage(Core.documentViewer.getPageCount())`
* `goToNextPage`, instead use `Core.documentViewer.setCurrentPage(Core.documentViewer.getCurrentPage() + 1)`
* `goToPrevPage`, instead use `Core.documentViewer.setCurrentPage(Core.documentViewer.getCurrentPage() - 1)`


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.apryse.com/web/migration-guides/migrating-to-v11/migrating-to-v11.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.