The latest articles on DEV Community by Swayam Agrawal (@swayam_agrawal). https://dev.to/swayam_agrawal 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%2F3909289%2Fe301178c-f1a1-4aa8-9635-23518d883880.png https://dev.to/swayam_agrawal en Swayam Agrawal Sat, 02 May 2026 16:19:17 +0000 https://dev.to/swayam_agrawal/how-i-built-24-free-pdf-tools-using-nextjs-and-pdf-lib-54h https://dev.to/swayam_agrawal/how-i-built-24-free-pdf-tools-using-nextjs-and-pdf-lib-54h <p>I spent the last few months building <strong>AuraPDF</strong> — a completely free online PDF tool suite with 24+ tools. No signup, no watermarks, no hidden fees.</p> <p>🔗 <strong>Live:</strong> <a href="https://aurapdf.com" rel="noopener noreferrer">aurapdf.com</a></p> <h2> Why I Built This </h2> <p>Every time I needed to merge or compress a PDF, I'd land on sites that either:</p> <ul> <li>Required signup for basic features</li> <li>Added watermarks to free users</li> <li>Had sketchy privacy practices (uploading files to unknown servers)</li> </ul> <p>So I built my own. All processing happens <strong>client-side</strong> using JavaScript — your files never leave your browser for most tools.</p> <h2> Tech Stack </h2> <ul> <li> <strong>Frontend:</strong> Next.js 15 (App Router) + TypeScript</li> <li> <strong>PDF Processing:</strong> pdf-lib (server-side), pdfjs-dist (client-side rendering)</li> <li> <strong>Styling:</strong> Custom CSS design system with dark mode</li> <li> <strong>Auth:</strong> Clerk (optional, not required to use tools)</li> <li> <strong>Deployment:</strong> Vercel</li> <li> <strong>Backend:</strong> Node.js API routes for heavy operations (compress, convert)</li> </ul> <h2> Tools Available </h2> <h3> 📁 Organize </h3> <ul> <li>Merge PDF — combine multiple files</li> <li>Split PDF — separate into parts</li> <li>Rotate, Delete, Extract, Reorder pages</li> <li>Add page numbers</li> </ul> <h3> 🔄 Convert </h3> <ul> <li>JPG/PNG/HEIC → PDF</li> <li>PDF → Word/Excel/JPG/PNG</li> <li>URL → PDF (headless Chrome)</li> </ul> <h3> 🔒 Security </h3> <ul> <li>Password protect (AES-256)</li> <li>Unlock PDF</li> <li>Add watermark</li> </ul> <h3> ⚡ Optimize </h3> <ul> <li>Compress PDF (up to 90% reduction)</li> <li>Crop PDF</li> <li>PDF Health Checker</li> </ul> <h2> Biggest Technical Challenges </h2> <h3> 1. Client-Side PDF Rendering on Mobile </h3> <p>PDF.js + canvas on mobile browsers was a nightmare. Mobile Safari has strict canvas memory limits. I had to:</p> <ul> <li>Implement a <strong>render queue</strong> (one thumbnail at a time)</li> <li>Cap canvas dimensions to prevent crashes</li> <li>Add auto-retry with breathing pauses between renders</li> </ul> <h3> 2. Drag &amp; Drop on Touch Devices </h3> <p>Used dnd-kit with custom <code>TouchSensor</code> — needed 1.5s long-press delay so users could scroll without accidentally triggering drag.</p> <h3> 3. SEO for 120+ Pages </h3> <p>Built a programmatic SEO system generating tool pages, compression target pages, how-to guides, and multilingual content — all from TypeScript data files.</p> <h2> What I Learned </h2> <ol> <li> <strong>Client-side PDF processing is surprisingly powerful</strong> — pdf-lib can do most things without a server</li> <li> <strong>Mobile is a completely different beast</strong> — test on real devices, not just Chrome DevTools</li> <li> <strong>SEO takes months</strong> — even with perfect technical SEO, new domains need time to build trust</li> </ol> <h2> Try It Out </h2> <p>👉 <a href="https://aurapdf.com" rel="noopener noreferrer">https://aurapdf.com</a></p> <p>Would love feedback from the dev community. What features would you want in a PDF tool? Drop a comment! 🙌</p> nextjs webdev javascript ai