> 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/ui-customization/legacy-ui/legacy-ui.md).

# Legacy UI for WebViewer

Enhance your web app with the legacy UI for WebViewer. Explore a feature-rich interface for seamless document viewing, annotation, and customization. The Apryse Web SDK streamlines secure, serverless

{% hint style="warning" %}
**Legacy UI is deprecated**

The Legacy UI is **deprecated**. It will be removed and support will end in mid-2026 with the release of WebViewer 12.

We strongly recommend using the **Modular UI** for improved performance and features. If your application currently uses the Legacy UI and you want to migrate to Modular UI, refer to our [Migration Guide to V11 Modular UI](/web/migration-guides/migrating-to-v11/migrating-to-v11-modular-ui.md) for step-by-step instructions.
{% endhint %}

A complete and responsive user interface is provided out of the box in the WebViewer download package, allowing you to quickly get started integrating a document viewer into your web app. Zooming, thumbnails, searching, annotation tools and comments are just a few of the features provided by the UI.

[APIs are provided](/web/ui-customization/ui-customization.md) to allow you to customize the look and feel of the UI and the [code is open source](https://github.com/ApryseSDK/webviewer-ui/) for more [advanced customizations](/web/ui-customization/advanced-customization.md). The UI uses WebViewer's [core document APIs](/web/ui-customization/core.md) to handle rendering and document manipulation.

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-ab9fce6316c45c34387024c20316001387a5662e%2Fd26b83c1f7840dd9a116b38cdaf03f97cbd842e8-1182x520.png?alt=media)

## How it works behind the scenes

When using the UI your web app HTML page might look something like this:

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

```html
<!-- Your app's HTML page -->
<html>
  <head>
    <script src="my-app-code.js"></script>
    <script src="webviewer/lib/webviewer.min.js"></script>
  </head>
  <body>
    <!-- viewerElement passed to WebViewer -->
    <div id="viewer">
    </div>
  </body>
</html>
```

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

When the page loads, webviewer.min.js will create an iframe inside the specified viewer element with the `src` set to the WebViewer UI's index.html:

{% tabs %}
{% tab title="JavaScript (SDK v8.0+)" %}
{% code lineNumbers="true" %}

```js
<div id="viewer">
  <iframe src="webviewer/lib/ui/build/index.html#d=...">
    <html>
      <body>
        <div id="app">
          
        </div>
        
        <script src="../../core/webviewer-core.min.js"></script>
      </body>
    </html>
  </iframe>
</div>
```

{% endcode %}
{% endtab %}

{% tab title="HTML" %}
{% code lineNumbers="true" %}

```html
<div id="viewer">
  <iframe src="webviewer/lib/ui/build/index.html#d=...">
    <html>
      <body>
        <div id="app">
          
        </div>
        
        <script src="../../core/CoreControls.js"></script>
      </body>
    </html>
  </iframe>
</div>
```

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

The UI's HTML file loads `webviewer-core.min.js` and [uses those APIs](/web/ui-customization/core.md) to render the document.

![](https://3532544125-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FX9YnTSKIHvV7m0A36LbO%2Fuploads%2Fgit-blob-c829652740eeb44639640e0ad04d75e4b3ecb4f3%2Fa80076bd6937b7d159b804b91821055af834b503-1082x822.png?alt=media)

## How to Use

To use the Legacy UI you need to add the `ui` property to your WebViewer constructor with the value `'legacy'`.

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

```js
WebViewer(
  {
    path: '/path/to/your/webviewer',
    initialDoc: '/path/to/your/document.pdf',
    ui: 'legacy' // enable Legacy UI
  },
 document.getElementById("viewer")
).then((instance) => {
 // ...
});
```

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


---

# 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/ui-customization/legacy-ui/legacy-ui.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.