The latest articles on DEV Community by Muath Aljehani (@muath_aljehani_9d9238bb3a). https://dev.to/muath_aljehani_9d9238bb3a https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3824470%2Fc80d6f45-34d8-4ba1-983d-33e269227087.jpg https://dev.to/muath_aljehani_9d9238bb3a en Muath Aljehani Sat, 14 Mar 2026 19:49:59 +0000 https://dev.to/muath_aljehani_9d9238bb3a/i-built-a-pdf-toolkit-that-never-uploads-your-files-heres-how-5f2o https://dev.to/muath_aljehani_9d9238bb3a/i-built-a-pdf-toolkit-that-never-uploads-your-files-heres-how-5f2o <h2> The Problem </h2> <p>Every time I needed to compress, merge, or convert a PDF, I had to <br> upload it to some website. Most of them store your file on their <br> servers for 24+ hours.</p> <p>For personal documents, contracts, or anything sensitive — that's a <br> real privacy concern.</p> <h2> The Idea </h2> <p>What if all the processing happened locally in the browser?</p> <p>Modern JavaScript is powerful enough to handle PDF manipulation <br> entirely client-side. No file ever needs to leave your device.</p> <h2> What I Built </h2> <p><strong>opdf.io</strong> — 27 free PDF tools that run 100% in your browser.</p> <p>Tools include:</p> <ul> <li>Merge, split, compress, rotate</li> <li>PDF → Word, JPG, PNG</li> <li>OCR (works on scanned PDFs, supports Arabic)</li> <li>Sign, protect with password, redact sensitive info</li> <li>Watermark, page numbers, header &amp; footer</li> <li>And more</li> </ul> <h2> The Stack </h2> <ul> <li> <strong>React + TypeScript + Vite</strong> — frontend framework</li> <li> <strong>pdf-lib</strong> — PDF creation and manipulation</li> <li> <strong>PDF.js</strong> — PDF rendering</li> <li> <strong>Tesseract.js</strong> — in-browser OCR</li> <li> <strong>Mammoth</strong> — DOCX conversion</li> <li> <strong>Cloudflare Pages</strong> — hosting and edge delivery</li> </ul> <h2> Interesting Challenges </h2> <p><strong>OCR performance:</strong> Tesseract.js runs in a Web Worker to avoid <br> blocking the UI. Large scanned PDFs can take a while — showing <br> progress without freezing the page took some work.</p> <p><strong>Bundle size:</strong> Initial bundle was 648KB. After splitting <br> translations into 19 per-language chunks and lazy-loading all <br> tool pages, it's now 58KB — a 91% reduction.</p> <p><strong>PDF.js worker:</strong> Each page that uses PDF.js needs the worker <br> configured. Ended up creating a shared <code>pdfjsWorker.ts</code> that <br> exports the pre-configured library.</p> <h2> What's Next </h2> <ul> <li>More tools based on user feedback</li> <li>Improve mobile experience</li> <li>Performance improvements for large files</li> </ul> <p>Happy to answer questions about the architecture or any specific <br> implementation details.</p> <p><strong><a href="https://opdf.io" rel="noopener noreferrer">https://opdf.io</a></strong></p> showdev webdev javascript privacy