Sort, reorder, and organize pages in your PDF document visually.
When you drag a page to a new position using this tool, the visual change is immediate. But behind the scenes, we are actually modifying the structural hierarchy of the PDF document.
In the PDF specification, the document structure is governed by a Pages Dictionary. This dictionary contains an array called /Kids, which holds references to every single page in the document in strict sequential order.
If you move Page 5 to position 2, we don't have to rewrite the heavy graphics data of Page 5.
We simply take the reference pointer to Page 5 and insert it into the 2nd slot of the /Kids array. When we save the file, the PDF viewer reads the new array order and displays the pages accordingly.
If you delete a page from the UI, we remove its reference from the /Kids array. However, doing only this would leave "orphaned" objects taking up space.
To ensure the final file size actually shrinks, our engine traverses the entire object tree before saving, identifying any orphaned fonts, images, or vector paths that belonged exclusively to that deleted page, and permanently scrubs them from the file.
To show you a visual drag-and-drop interface, we have to render every page of the PDF into an image thumbnail.
For a 100-page document, doing this synchronously would freeze the browser. We use the IntersectionObserver API to lazily render thumbnails only when they are about to scroll into view, ensuring the UI remains perfectly smooth.
What array inside the PDF controls the visual order of the pages?
