Reorder PDF pages in React
Let your users rearrange PDF pages without leaving your app. Build the PDF page organizer in your own UI, move pages with one hook call, and save a standard PDF, all in the browser.
Works with vanilla JavaScript and most popular frameworks
How to reorder PDF pages with the SDK
Load one PDF, build a page rail from hooks, and save the reordered file without sending it through a PDF reorder API or any processing service.
Load the PDF
PdfProviders owns the document state. Viewport renders the document while your application supplies the file picker, page rail, and toolbar.
import { useEffect } from 'react';
import { PdfProviders, Viewport, useLoadPdf } from '@sdk-pdf/react';
import '@sdk-pdf/react/style.css';
type Props = { file: Uint8Array };
function PageOrganizer({ file }: Props) {
const [state, loadPdf] = useLoadPdf();
useEffect(() => {
void loadPdf(file);
}, [file, loadPdf]);
if (state.status !== 'ready') return null;
return (
<div style={{ height: '100vh' }}>
<Viewport />
</div>
);
}
export function App({ file }: Props) {
return (
<PdfProviders>
<PageOrganizer file={file} />
</PdfProviders>
);
}
Reorder PDF pages from React
Reordering is a hook call over stable page IDs. Move one page or a whole selection in a single call, and the group keeps its internal order.
import { usePageMove, usePages } from '@sdk-pdf/react';
export function useMoveChapter() {
const pages = usePages();
const { moveBefore } = usePageMove();
return () => {
const chapter = pages.slice(3, 6).map((page) => page.id);
const secondPage = pages[1];
if (secondPage && chapter.length > 0) moveBefore(chapter, secondPage.id);
};
}A browser-native PDF page reorder SDK
No processing service, no workers, no WASM binaries, no font files to host. PDF page manipulation, including reordering, runs in the tab, and the PDF comes out as bytes.
'use client';
import dynamic from 'next/dynamic';
const PageOrganizer = dynamic(() => import('./page-organizer'), { ssr: false });
export default function Page() {
return <PageOrganizer />;
}- Framework
- React 19, with react and react-dom as peer dependencies
- Module format
- ESM only; use a bundler (Vite, Next.js, or equivalent)
- Runtime
- Browser only. In Next.js, use a client component with ssr: false
- Bundle
- 277 KB gzipped; CJK character maps are code-split and lazy
- Assets to host
- None. Everything the engine needs is in the module graph
- Bundler
- Alias the unused canvas require once (see config snippets)
- Strict Mode
- Off for now. The simulated unmount kills the engine
- Encrypted files
- Pass { password } to loadPdf. RC4, AES-128, and AES-256
- Input
- PDF, one document loaded at a time
- Output
- Uint8Array with the saved PDF, or a browser download
Where to go next
Questions engineers ask
Yes, you can reorder several pages in PDF at once. moveBefore and moveAfter accept one page ID or an array of IDs and keep the order of the group you pass. Without an anchor page, the group goes to the start or the end of the document.
Still have questions? Book 30 minutes
A short call with the engineering team and a straight answer instead of a pitch