Message API/docs/components/pdf/move-pages

Move Pages

Reorder pages in the active PDF using move-top, move-bottom, move-up, and move-down.

Overview

The move actions reorder existing pages in the active PDF. All move actions use `pageRange` to identify which pages should move.

Choose the move action based on the destination behavior you need: top, bottom, up by one step, or down by one step.

move-top: Moves the selected pages to the beginning of the document.
move-bottom: Moves the selected pages to the end of the document.
move-up: Moves the selected pages one position earlier.
move-down: Moves the selected pages one position later.

Examples

All move actions share the same payload structure. Only the `action` value changes.

Move pages to top

viewerWindow.postMessage({
  type: 'pageManipulation',
  payload: {
    requestId: 'move-top-1',
    action: 'move-top',
    pageRange: [[3, 4]]
  }
}, '*');

Move a page down

viewerWindow.postMessage({
  type: 'pageManipulation',
  payload: {
    requestId: 'move-down-1',
    action: 'move-down',
    pageRange: [[1]]
  }
}, '*');

Complete HTML Example

Use this full standalone HTML document when you want a minimal host page for moving pages.

html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>PDF Move Pages Demo</title>
  <style>
    body {
      margin: 0;
      font-family: Arial, sans-serif;
      background: #0b1220;
      color: #e5e7eb;
    }
    .app {
      display: grid;
      grid-template-columns: 320px 1fr;
      gap: 12px;
      min-height: 100vh;
      padding: 12px;
    }
    .panel {
      border: 1px solid #2f3b4f;
      border-radius: 12px;
      background: #111827;
      padding: 12px;
      display: grid;
      gap: 10px;
      align-content: start;
    }
    .stack {
      display: grid;
      gap: 8px;
    }
    .row {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
    }
    input, button, select {
      width: 100%;
      border: 1px solid #2f3b4f;
      border-radius: 8px;
      background: #0f172a;
      color: #e5e7eb;
      padding: 8px 10px;
      font: inherit;
      box-sizing: border-box;
    }
    button {
      width: auto;
      cursor: pointer;
    }
    .pages {
      display: grid;
      gap: 8px;
      max-height: 60vh;
      overflow: auto;
    }
    .page {
      border: 1px solid #2f3b4f;
      border-radius: 10px;
      background: #0d1728;
      padding: 8px;
      display: grid;
      gap: 8px;
    }
    .page.active {
      border-color: #22d3ee;
    }
    iframe {
      width: 100%;
      height: calc(100vh - 24px);
      border: 1px solid #2f3b4f;
      border-radius: 12px;
      background: #04101c;
    }
    img {
      max-width: 100%;
      height: auto;
      display: block;
      background: #fff;
      border-radius: 8px;
    }
    .meta {
      font-size: 12px;
      color: #9ca3af;
    }
  </style>
</head>
<body>
  <div class="app">
    <div class="panel">
      <div class="stack">
      <input id="viewerUrl" value="http://localhost:5173" />
      <input id="fileUrl" placeholder="Public PDF URL" />
      <div class="row">
        <button id="loadViewerBtn">Load Viewer</button>
        <button id="loadPdfBtn">Load PDF</button>
      </div>
      <div id="pages" class="pages"></div>
    </div>
    </div>
    <iframe id="viewerFrame" title="PDF Move Pages Demo Viewer"></iframe>
  </div>
  <script>
const viewerFrame = document.getElementById('viewerFrame');
const viewerUrlInput = document.getElementById('viewerUrl');
const fileUrlInput = document.getElementById('fileUrl');
const pagesEl = document.getElementById('pages');
let latestPageList = null;

function post(type, payload) {
  viewerFrame.contentWindow.postMessage({ type, payload }, '*');
}

function loadViewer() {
  viewerFrame.src = viewerUrlInput.value.trim();
}

function loadPdf() {
  post('view', {
    fileUrl: fileUrlInput.value.trim(),
    displayName: 'Demo User',
    username: 'demo.user',
    email: 'demo@example.com'
  });
}

window.addEventListener('message', (event) => {
  if (event.source !== viewerFrame.contentWindow) return;
  const data = event.data;
  if (!data || typeof data !== 'object') return;
  if (data.type === 'pageList') {
    latestPageList = data.payload;
    renderPages(data.payload.pages);
  }
  onViewerMessage(data);
});

function renderPages(pages) {
  if (!pagesEl) return;
  pagesEl.innerHTML = '';
  pages.forEach((page) => {
    const item = document.createElement('div');
    item.className = page.isSelected ? 'page active' : 'page';
    const actions = pageActions(page);
    item.innerHTML = [
      page.thumbnailDataUrl
        ? '<img src="' + page.thumbnailDataUrl + '" width="' + (page.thumbnailWidth || 120) + '" height="' + (page.thumbnailHeight || 160) + '" />'
        : '<div class="meta">No thumbnail data</div>',
      '<div><strong>' + (page.label || ('Page ' + (page.index + 1))) + '</strong></div>',
      '<div class="meta">' + (page.title || 'Default') + '</div>',
      actions
    ].join('');
    wirePageActions(item, page);
    pagesEl.appendChild(item);
  });
}

document.getElementById('loadViewerBtn').addEventListener('click', loadViewer);
document.getElementById('loadPdfBtn').addEventListener('click', loadPdf);

function pageActions() {
  return '<div class="row"><button data-action="move-up">Move Up</button><button data-action="move-down">Move Down</button></div>';
}
function wirePageActions(item, page) {
  item.querySelector('[data-action="move-up"]').addEventListener('click', () => {
    post('pageManipulation', { requestId: 'move-up-' + page.index, action: 'move-up', pageRange: [[page.index]] });
  });
  item.querySelector('[data-action="move-down"]').addEventListener('click', () => {
    post('pageManipulation', { requestId: 'move-down-' + page.index, action: 'move-down', pageRange: [[page.index]] });
  });
}
function onViewerMessage(data) {
  if (data.type === 'pageManipulationResult') console.log(data.payload);
}
  </script>
</body>
</html>

Complete HTML Example

Live Preview

Open the focused demo to test page move actions against a live PDF.

PDF Move Pages Demo

Focused live demo for move-top, move-bottom, move-up, and move-down.

Preview opens in a large modal for zoom-friendly review.