Web SDKv1.0.0
Get started (opens in a new tab)Changelog (opens in a new tab)Playground (opens in a new tab)JavaScript PDF viewer (opens in a new tab)Get a free key (opens in a new tab)

Sidebar

The side panels: Pages (thumbnails), Outline, Attachments, Signatures and Comments share one sidebar (see Document features). Each panel is false to leave it out, or an object for its own settings; a panel is offered on its own terms besides — outline and attachments when the document has some or they can be made, signatures when the document declares some, comments under every license (reading comments is viewing; the panel is read-only without annotations).

The current page is marked in the Pages panel by a bar in the gutter rather than a ring around the page. A panel that may edit is offered even to a document without any of its content, so the first bookmark or attachment can be made; a read-only one appears only for a document that has some.

A host that draws its own chrome (toolbar.layout: 'none') with its own Pages button sets rail: false, or it ends up with two controls for one panel: the SDK then draws neither the rail of tabs nor the panel's collapse button, the sidebar shows only while a panel is open, and the host's button is the way in and out through viewer.openPanel() — and where the panel floats over the page as a drawer, Escape inside it and a tap on its backdrop close it too, so a keyboard is never without a way out. On a phone the panel is the screen, with no backdrop to tap and no close of ours: your button is the only way out, so keep it outside the container. The panelChanged event reports every change, whoever made it, so that button stays right.

SidebarConfigconfig.sidebar

Example

viewer.tsTypeScript
const viewer = new PDFViewer(container, doc, {
  sidebar: {
    pages: { defaultOpen: false },
    signatures: false,
    comments: { editing: false }, // a read-only review
  },
});

Options 15

railbooleanDefaulttrue
The rail of tab buttons (a phone's tab row) and the panel's collapse / close button; false when your own chrome toggles the panels through openPanel().
railTypeScript
toolbar: { layout: 'none' },
sidebar: { rail: false }, // your own Pages button, not ours beside it
pagesboolean | PagesPanelConfigDefaulton, open where the sidebar pushes the document aside
The Pages panel (thumbnails). false leaves it out; a PagesPanelConfig object sets whether it starts open and whether it carries a Manage pages button. The thumbnails' own page actions (rotate, move, duplicate, delete) follow tools.managePages and need the edit-pages license feature.
pagesTypeScript
sidebar: { pages: { defaultOpen: false } }
enabledbooleanDefaulttrue
Offer the Pages panel.
defaultOpenbooleanDefaulttrue
Start open where the sidebar pushes the document aside; it always starts closed as a drawer.
managePagesbooleanDefaulttrue
A Manage pages button at the top of the panel, while the tool is on and the pages may change.
outlineboolean | EditablePanelConfigDefaulton, with editing
The Outline panel (bookmarks). Offered when the document has an outline or one can be made. Editing bookmarks needs the edit-pages license feature.
outlineTypeScript
sidebar: { outline: { editing: false } }
enabledbooleanDefaulttrue
Offer the Outline panel.
editingbooleanDefaulttrue
The panel's editing controls, in FULL mode when the document's permissions allow it and the license covers it (edit-pages).
attachmentsboolean | EditablePanelConfigDefaulton, with editing
The Attachments panel. Offered when the document has attachments or they can be made. Attaching and removing files needs the edit-pages license feature; downloading an attachment from the panel needs extract.
enabledbooleanDefaulttrue
Offer the Attachments panel.
editingbooleanDefaulttrue
The panel's editing controls, in FULL mode when the document's permissions allow it and the license covers it (edit-pages).
signaturesbooleanDefaulton
The digital signatures the document declares (metadata, no validation). Offered when the document declares some.
signaturesTypeScript
sidebar: { signatures: false }
commentsboolean | EditablePanelConfigDefaulton, with editing
The Comments panel. Offered under every license — reading comments is viewing — and read-only without the annotations feature, which replying, editing, deleting and status need. comments: { editing: false } makes a read-only review. The selection bar's Comment action also needs this panel, editable.
commentsTypeScript
sidebar: { comments: { editing: false } }
enabledbooleanDefaulttrue
Offer the Comments panel.
editingbooleanDefaulttrue
The panel's editing controls (a reply, an edit, a deletion, a review status), in FULL mode when the document's permissions allow it and the license covers it (annotations).