# Page Display Layout

DsPdf is a Document Solutions product that offers a rich library to read, create, modify, and save PDF files without using any external tool.

## Content

DsPdfViewer enables a user to set the page layout of PDF documents to enhance the viewing experience using **Page Display** drop-down button (![](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/page-display-icon.png)) in the toolbar. Page Display drop-down button provides the following options to set the page layout:

| **Option** | **Client-side API** | **Description** |
| ------ | --------------- | ----------- |
| Single-page view | SinglePage | Displays a single page at a time. Ideal for focused reading and detailed examination of content. |
| Two-page view | TwoPage | Displays two pages side by side, optimizing the layout for comparison and context understanding. |
| Single-page Scrolling | SinglePageScrolling | Displays a single page with the ability to scroll through the document vertically in a single-column layout for easy navigation. |
| Two-page Scrolling | TwoPageScrolling | Displays two pages simultaneously with the ability to scroll through the document, facilitating a broader view while maintaining readability. |
| Enable scrolling | None | Enables you to scroll through the document continuously in a vertical column. |

![](https://cdn.mescius.io/document-site-files/images/884d2bfb-301b-49bc-8d90-656c5b910507/images/page-display-working.gif)

## Set Initial Page Display Layout

DsPdfViewer provides **pageDisplay** option to set the initial page display layout of the viewer. Refer to the following example code to set the initial page display layout:

```javascript
// Set initial page display to TwoPageScrolling.
var viewer = new DsPdfViewer("#host", { supportApi: 'api/pdf-viewer', pageDisplay: "TwoPageScrolling" });
```

## Change Page Display Layout

DsPdfViewer provides pageDisplay property to change the page display layout of the viewer. Refer to the following example code to change the page display layout:

```javascript
// Change page display to SinglePageScrolling.
viewer.pageDisplay = "SinglePageScrolling";
```