The latest articles on DEV Community by Abdul Ahad (@ahadkhan2401). https://dev.to/ahadkhan2401 https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F4055581%2Fc4793bab-d739-4089-952b-18679add0086.png https://dev.to/ahadkhan2401 en Abdul Ahad Thu, 30 Jul 2026 18:52:24 +0000 https://dev.to/ahadkhan2401/i-built-a-pdf-invoice-generator-that-never-sends-your-data-to-a-server-4l4d https://dev.to/ahadkhan2401/i-built-a-pdf-invoice-generator-that-never-sends-your-data-to-a-server-4l4d <p>Most online invoice tools upload your data. Your client names, your rates, what you earn — it all sits on someone's server. For a tool whose entire job is producing one PDF, that always felt like a bad trade.</p> <p>So I built <a href="https://www.pdfbillbuilder.com" rel="noopener noreferrer">PDF Bill Builder</a> with a hard rule: nothing leaves the browser.</p> <h2> The stack </h2> <ul> <li> <strong>Next.js 16</strong> (App Router) + <strong>React 19</strong> + TypeScript</li> <li> <strong>jsPDF + html2canvas</strong> for PDF generation — both dynamically imported, so they only load when someone actually clicks Download</li> <li> <strong>Tailwind CSS v4</strong> for the marketing pages; the tool itself uses inline styles (deliberate — see below)</li> <li>Optional tier: Neon Postgres + Google OAuth + HMAC-signed tokens</li> </ul> <h2> Why the tool uses inline styles </h2> <p>The PDF is rendered by rasterising the live preview DOM with html2canvas. Any style that isn't computed at capture time silently disappears from the output. Tailwind's utility classes were fine until a CSS-layer ordering change dropped borders from the PDF but not the screen. Inline styles removed a whole class of bug where the preview and the PDF disagreed.</p> <h2> The A4 auto-fit problem </h2> <p>An invoice with 3 line items and one with 30 both need to look right on one page. The preview measures its own rendered height and applies a transform scale so content always fits A4, then html2canvas captures at the scaled size. Simple, and it beat every "paginate manually" approach I tried.</p> <h2> What client-side actually buys you </h2> <p>No server means no database of invoices, no breach surface, and no privacy policy gymnastics. It also means no server costs, which is why the free tier can be genuinely unlimited instead of a trial in disguise.</p> <p>The trade-off: no cross-device sync unless you sign in. That felt like the right default for a tool people use once a month.</p> <p>Code: <a href="https://github.com/Ahad-Khan2401/invoice-generator" rel="noopener noreferrer">https://github.com/Ahad-Khan2401/invoice-generator</a></p> <p>Happy to answer questions about the jsPDF pipeline — it was the fiddliest part by far.</p> nextjs javascript webdev showdev