Build a book reader with PDF.js: Two-page spread view tutorial

Hulya Masharipov

Updated: December 22, 2025

Build a book reader with PDF.js: Two-page spread view tutorial

TL;DR

Build a book reader with PDF.js that displays pages side by side like a real book. This tutorial covers two-page spread rendering, book-style page flipping, and toggleable reading modes, useful for ebooks, magazines, and comics.

Reading PDFs page by page works for documents, but books and magazines work better as a two-page spread. In this tutorial, you’ll build a book reader with PDF.js(opens in a new tab) that supports both single-page and spread view modes. If you need a production-ready solution, Nutrient Web SDK includes spread view modes, annotations, digital signatures, an AI assistant, and real-time collaboration.

New to PDF.js? Start with our complete guide to PDF.js for the basics, then come back here.

What you’ll build

A book reader with:

Two-page spread view — Display facing pages side by side
Single-page mode — Toggle to a traditional one-page view
Book-style navigation — Flip through page pairs
Responsive layout — Pages resize to fit the viewport

1. HTML setup

Create a minimal HTML skeleton with a toolbar for page navigation and a reading mode toggle:

1
<!DOCTYPE html>
2
<html>
3
    <head>
4
        <title>PDF Book Reader</title>
5
        <meta charset="UTF-8" />
47 collapsed lines
6
        <style>
7
            * {
8
                box-sizing: border-box;
9
            }
10

11
            body {
12
                margin: 0;
13
                font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
14
            }
15

16
            #viewport {
17
                display: flex;
18
                justify-content: center;
19
                gap: 4px;
20
                background: #333;
21
                padding: 20px;
22
                min-height: calc(100vh - 50px);
23
                align-items: flex-start;
24
            }
25

26
            #toolbar {
27
                padding: 10px;
28
                background: #f5f5f5;
29
                display: flex;
30
                gap: 20px;
31
                align-items: center;
32
            }
33

34
            .page {
35
                width: 45%;
36
                max-width: 500px;
37
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
38
            }
39

40
            .page canvas {
41
                display: block;
42
                width: 100%;
43
                height: auto;
44
            }
45

46
            button {
47
                padding: 8px 16px;
48
                cursor: pointer;
49
                border: 1px solid #ccc;
50
                background: #fff;
51
                border-radius: 4px;
52
            }
53

54
            button:hover {
55
                background: #e9e9e9;
56
            }
57

58
            select {
59
                padding: 6px 10px;
60
                border-radius: 4px;
61
                border: 1px solid #ccc;
62
            }
63
        </style>
64
    </head>
65

66
    <body>
67
        <div id="app">
68
            <div role="toolbar" id="toolbar">
69
                <div id="pager">
70
                    <button data-pager="prev">← Previous</button>
71
                    <button data-pager="next">Next →</button>
72
                </div>
73
                <div id="page-mode">
74
                    <label>
75
                        Pages per spread:
76
                        <select id="spread-select">
77
                            <option value="1">Single page</option>
78
                            <option value="2" selected>Two-page spread</option>
79
                        </select>
80
                    </label>
81
                </div>
82
            </div>
83
            <div id="viewport-container">
84
                <div role="main" id="viewport"></div>
85
            </div>
86
        </div>
87

88
        <script
89
            src="https://unpkg.com/pdfjs-dist@5.0.375/build/pdf.min.mjs"
90
            type="module"
91
        ></script>
92
        <script src="index.js" type="module"></script>
93
    </body>
94
</html>

The key elements:

Spread selector — Toggle between single-page and two-page spread modes
Viewport with flexbox — Centers and displays pages side by side
Dark background — Creates a book reader look

2. Loading PDF.js

Import PDF.js and configure the web worker for background rendering:

import * as pdfjsLib from 'https://unpkg.com/pdfjs-dist@5.0.375/build/pdf.min.mjs';

pdfjsLib.GlobalWorkerOptions.workerSrc =
  'https://unpkg.com/pdfjs-dist@5.0.375/build/pdf.worker.min.mjs';

3. Book reader state

Define variables to track the reading position and spread mode:

let currentSpreadIndex = 0;  // Which spread we're viewing (0, 1, 2...).
let pagesPerSpread = 2;      // 1 = single page, 2 = two-page spread.
let pdfDoc = null;
let totalPages = 0;

const viewport = document.querySelector('#viewport');

currentSpreadIndex — Which "spread" (pair of pages) is currently displayed
pagesPerSpread — Controls single-page (1) or two-page spread (2) mode

4. Loading the book

Initialize the PDF and set up event listeners:

function initBookReader(pdfURL) {
  pdfjsLib.getDocument(pdfURL).promise.then((pdf) => {
    pdfDoc = pdf;
    totalPages = pdf.numPages;
    initControls();
    renderSpread();
  });
}

Navigate through spreads (page pairs) rather than individual pages:

function initControls() {
  // Page flip buttons.
  document.querySelector('#pager').addEventListener('click', (e) => {
    const action = e.target.getAttribute('data-pager');
    if (action === 'prev' && currentSpreadIndex > 0) {
      currentSpreadIndex--;
      renderSpread();
    }
    if (action === 'next') {
      const maxSpread = Math.ceil(totalPages / pagesPerSpread) - 1;
      if (currentSpreadIndex < maxSpread) {
        currentSpreadIndex++;
        renderSpread();
      }
    }
  });

  // Spread mode toggle.
  document.querySelector('#spread-select').addEventListener('change', (e) => {
    pagesPerSpread = Number(e.target.value);
    currentSpreadIndex = 0; // Reset to first spread
    renderSpread();
  });
}

The key difference from a standard PDF viewer: We navigate by spreads, not pages. In two-page mode, clicking Next advances by two pages.

6. Rendering the spread

Calculate which pages belong to the current spread and render them side by side:

function renderSpread() {
  const startPage = currentSpreadIndex * pagesPerSpread;
  const endPage = Math.min(startPage + pagesPerSpread - 1, totalPages - 1);

  // Fetch all pages in this spread.
  const pagePromises = [];
  for (let i = startPage; i <= endPage; i++) {
    pagePromises.push(pdfDoc.getPage(i + 1)); // PDF.js uses 1-based indexing
  }

  Promise.all(pagePromises).then((pages) => {
    // Create canvas containers for each page.
    viewport.innerHTML = pages
      .map(() => `<div class="page"><canvas></canvas></div>`)
      .join('');

    // Render each page.
    pages.forEach((page, index) => {
      renderPage(page, viewport.children[index]);
    });
  });
}

function renderPage(page, container) {
  const canvas = container.querySelector('canvas');
  const context = canvas.getContext('2d');

  // Scale to fit container width.
  let pdfViewport = page.getViewport({ scale: 1 });
  const scale = container.offsetWidth / pdfViewport.width;
  pdfViewport = page.getViewport({ scale });

  canvas.width = pdfViewport.width;
  canvas.height = pdfViewport.height;

  page.render({ canvasContext: context, viewport: pdfViewport });
}

In two-page spread mode, the viewport displays both pages side by side using flexbox.

7. Complete code

Here’s the full book reader implementation:

1
import * as pdfjsLib from 'https://unpkg.com/pdfjs-dist@5.0.375/build/pdf.min.mjs';
2

3
pdfjsLib.GlobalWorkerOptions.workerSrc =
4
  'https://unpkg.com/pdfjs-dist@5.0.375/build/pdf.worker.min.mjs';
5

6
// Book reader state.
7
let currentSpreadIndex = 0;
8
let pagesPerSpread = 2;
9
let pdfDoc = null;
10
let totalPages = 0;
11

12
const viewport = document.querySelector('#viewport');
13

14
// Initialize the book reader.
15
function initBookReader(pdfURL) {
31 collapsed lines
16
  pdfjsLib.getDocument(pdfURL).promise.then((pdf) => {
17
    pdfDoc = pdf;
18
    totalPages = pdf.numPages;
19
    initControls();
20
    renderSpread();
21
  });
22
}
23

24
// Set up navigation and spread mode controls.
25
function initControls() {
26
  document.querySelector('#pager').addEventListener('click', (e) => {
27
    const action = e.target.getAttribute('data-pager');
28
    if (action === 'prev' && currentSpreadIndex > 0) {
29
      currentSpreadIndex--;
30
      renderSpread();
31
    }
32
    if (action === 'next') {
33
      const maxSpread = Math.ceil(totalPages / pagesPerSpread) - 1;
34
      if (currentSpreadIndex < maxSpread) {
35
        currentSpreadIndex++;
36
        renderSpread();
37
      }
38
    }
39
  });
40

41
  document.querySelector('#spread-select').addEventListener('change', (e) => {
42
    pagesPerSpread = Number(e.target.value);
43
    currentSpreadIndex = 0;
44
    renderSpread();
45
  });
46
}
47

48
// Render the current spread (one or two pages).
49
function renderSpread() {
21 collapsed lines
50
  const startPage = currentSpreadIndex * pagesPerSpread;
51
  const endPage = Math.min(startPage + pagesPerSpread - 1, totalPages - 1);
52

53
  const pagePromises = [];
54
  for (let i = startPage; i <= endPage; i++) {
55
    pagePromises.push(pdfDoc.getPage(i + 1));
56
  }
57

58
  Promise.all(pagePromises).then((pages) => {
59
    viewport.innerHTML = pages
60
      .map(() => `<div class="page"><canvas></canvas></div>`)
61
      .join('');
62

63
    pages.forEach((page, index) => {
64
      renderPage(page, viewport.children[index]);
65
    });
66
  });
67
}
68

69
// Render a single page to its canvas.
70
function renderPage(page, container) {
71
  const canvas = container.querySelector('canvas');
72
  const context = canvas.getContext('2d');
73

74
  let pdfViewport = page.getViewport({ scale: 1 });
75
  const scale = container.offsetWidth / pdfViewport.width;
76
  pdfViewport = page.getViewport({ scale });
77

78
  canvas.width = pdfViewport.width;
79
  canvas.height = pdfViewport.height;
80

81
  page.render({ canvasContext: context, viewport: pdfViewport });
82
}
83

84
// Start the book reader.
85
initBookReader('book.pdf');

Add this CSS for proper page sizing:

.page {
  width: 45%;
  max-width: 500px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

Next steps

This tutorial covered the basics of building a book reader with PDF.js. For more features:

Learn PDF.js fundamentals — See our complete guide to PDF.js for the full API.
Add annotations — Explore how to add annotations for highlighting and notes.
Commercial viewer — Try Nutrient Web SDK for built-in spread view, annotations, and more.

Conclusion

You’ve built a book reader that displays PDFs in a two-page spread layout.

PDF.js handles the rendering, but building production features (annotations, bookmarks, search) takes more code. For a ready-to-use book reader with these features included, check out Nutrient Web SDK, which includes spread view modes, annotations, and real-time collaboration.

FAQ

How do I display a PDF as a two-page spread?

Set pagesPerSpread = 2 and render two consecutive pages side by side using a flexbox. The spread index determines which pair of pages to display. Nutrient Web SDK offers built-in spread view modes that handle this automatically.

Can I add a cover page that displays alone?

Yes. Check if the current spread is the first one (currentSpreadIndex === 0) and render only page 1. Then start two-page spreads from pages 2–3 onward. Nutrient Web SDK supports cover page mode with a single configuration option.

How do I add page turn animations?

PDF.js renders to canvas, so you’ll need a JavaScript animation library like GSAP or CSS transitions on the canvas containers. Consider a library like turn.js for realistic page-flip effects. Nutrient Web SDK includes smooth page transitions and scrolling modes built in.

How do I add text search to a PDF.js book reader?

Use PDF.js’s getTextContent() method to extract text from each page. Then build a search index. Highlighting matches requires calculating text positions and overlaying elements on the canvas. Nutrient Web SDK includes full-text search with highlighting built in.

Can I add annotations and highlights to the book reader?

PDF.js can display existing annotations but doesn’t support creating new ones. You’d need to build a custom annotation layer on top of the canvas and handle saving/loading yourself. Nutrient Web SDK provides annotations, including highlights, notes, and drawings.

Explore related topics

PDF.js JavaScript How To

Build a book reader with PDF.js: Two-page spread view tutorial

Table of contents

What you’ll build

1. HTML setup

2. Loading PDF.js

3. Book reader state

4. Loading the book

5. Book-style navigation

6. Rendering the spread

7. Complete code

Next steps

Conclusion

FAQ

Explore related topics

What you’ll build

1. HTML setup

2. Loading PDF.js

3. Book reader state

4. Loading the book

5. Book-style navigation

6. Rendering the spread

7. Complete code

Next steps

Conclusion

FAQ

Explore related topics

Related SDK articles

Complete guide to PDF.js

How to build an HTML5 image viewer

How to build an HTML5 PDF viewer