Legacy to Modern Viewer

Adobe’s new modern PDF viewer is a reimagining of the look and feel of PDF viewing on web, desktop, mobile, and PDF integrations. It introduces a new framework and workflows that better map to user mental models and enables a consistent user experience whether you are viewing a PDF in Adobe Acrobat or embedded on your website.

As of April 2023, the legacy viewer is no longer available. All requests to it will load the new modern PDF viewer. The documentation below will be useful for developers needing to migrate to the modern viewing experience.

Full window embed mode

Full window embed mode in legacy viewer

Full window embed mode in modern viewer

New Features

Simplified UI and iconography that will be consistent across all Acrobat PDF viewing surfaces for desktop, web, mobile and integrations.
Updated quick tools for document annotation, commenting that have moved from the top right to the left hand of the viewer.
NEW: Selection tool for selecting specific document areas and panning around the document while zoomed in.
UPDATE: Commenting will now include textbox commenting as well as comment color selections.
UPDATE: Highlight will now include underline, strike-through and multiple colors.
UPDATE: Drawing tool will now allow for different colors and line thickness adjustment.
Improved Commenting and navigation UX and UI.
Improved UX for document saving.
The left hand panel is deprecated and page thumbnails, bookmarks, page navigation, view mode and zoom options have moved to the right-hand panel.

Full window embed mode in legacy viewer

Sized container embed mode

Sized container embed mode in legacy viewer

Sized container embed mode in modern viewer

New Features

Improved UX for sized container embed mode on mobile. Users will be prompted to enter full screen view for optimized viewing.
There is no top bar and the file name appears as a toast and disappears after a few seconds. The print PDF, download PDF and document search options have moved from top bar to the page control toolbar at the bottom.
The full screen view contains additional options to display page thumbnails, bookmarks and page navigation options.

Sized container embed mode

Sized container embed mode in modern viewer

Sized container in full screen mode

Sized container embed mode in modern viewer

In-line embed mode

In-line embed mode in legacy viewer

In-line embed mode in modern viewer

Lightbox embed mode in legacy viewer

New Features

Improved page navigation UX and UI.
The page control toolbar at the bottom is deprecated and the page navigation, view mode and zoom options have moved to the right-hand panel.
The right-hand panel also contains page thumbnails and bookmarks.

Lightbox embed mode in modern viewer

Deprecated Features

The following features and configuration variables are deprecated in modern viewer:

Left hand panel (showLeftHandPanel) is deprecated in full window embed mode. Page thumbnails and bookmarks have moved to the right panel in modern viewer.
The bottom page control toolbar (showPageControls) is deprecated in full window and lightbox embed modes. Page navigation has moved to the right panel in modern viewer.
Docking and undocking the bottom page control toolbar (dockPageControls) is deprecated in full window and lightbox embed modes.

Migration Guide

To migrate over Adobe's new modern PDF viewer, developers are required to use viewer.js script (line 11) in place of the previously used main.js script. All APIs and callbacks will work as expected with significant improvement in user experience.

Modern PDF viewer integration

<!DOCTYPE html>
<html>
<head>
 <title>Adobe Acrobat Services PDF Embed API Sample</title>
 <meta charset="utf-8"/>
 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
 <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1"/>
</head>
<body style="margin: 0px">
 <div id="adobe-dc-view"></div>
 <script src="https://acrobatservices.adobe.com/view-sdk/viewer.js"></script>
 <script type="text/javascript">
    document.addEventListener("adobe_dc_view_sdk.ready", function()
    {
        var adobeDCView = new AdobeDC.View({clientId: "<YOUR_CLIENT_ID>", divId: "adobe-dc-view"});
        adobeDCView.previewFile(
       {
          content:   {location: {url: "https://acrobatservices.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"}},
          metaData: {fileName: "Bodea Brochure.pdf"}
       });
    });
 </script>
</body>
</html>
Copied to your clipboard
1<!DOCTYPE html>
2<html>
3<head>
4 <title>Adobe Acrobat Services PDF Embed API Sample</title>
5 <meta charset="utf-8"/>
6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
7 <meta id="viewport" name="viewport" content="width=device-width, initial-scale=1"/>
8</head>
9<body style="margin: 0px">
10 <div id="adobe-dc-view"></div>
11 <script src="https://acrobatservices.adobe.com/view-sdk/viewer.js"></script>
12 <script type="text/javascript">
13    document.addEventListener("adobe_dc_view_sdk.ready", function()
14    {
15        var adobeDCView = new AdobeDC.View({clientId: "<YOUR_CLIENT_ID>", divId: "adobe-dc-view"});
16        adobeDCView.previewFile(
17       {
18          content:   {location: {url: "https://acrobatservices.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf"}},
19          metaData: {fileName: "Bodea Brochure.pdf"}
20       });
21    });
22 </script>
23</body>
24</html>