Add Page Numbers to PDF Online Add page numbers.

The tool utilizes client-side JavaScript with React to add page numbers to PDF files. It employs memoization through the `useCallback` hook to optimize performance by preventing unnecessary re-renders of components. When a user drops a PDF file into the dropzone, the `handleFile` function is triggered, which loads the PDF document using the `pdf-lib` library and extracts its page count. The tool then uses the `PDFDocument` object to embed a font, in this case, Helvetica, and draw text onto each page. The `formatPageNumber` function is used to generate the display string for each page number, supporting formats such as plain, page-x-of-y, and roman numerals. To convert numbers to roman numerals, it uses a mapping of decimal values to their corresponding roman numeral representations.

The tool's UI is built using responsive components, ensuring that it adapts to different screen sizes and devices. The `FileDropzone` component handles file uploads, while the `SelectWithHelp` and `InputWithHelp` components provide users with options for customizing the position, format, and appearance of the page numbers. When the user clicks the download button, the tool creates a new Blob object containing the modified PDF document and uses the `URL.createObjectURL` method to generate a downloadable URL. The `download` function then creates an anchor element and simulates a click event to initiate the download process. Throughout this process, the tool leverages browser APIs such as the Clipboard API and the File API to interact with the user's file system and provide a seamless user experience.