DEV Community

Ewald
Ewald

Posted on

How I Built a Zero-Dependency PDF Generator in Next.js for a Legal SaaS

#nextjs #react #webdev #saas

Generating PDFs in a modern web app is usually a massive headache. If you've ever tried to spin up a headless browser like Puppeteer on a serverless function, or wrestled with the strict layouts of pdfmake or jsPDF, you know the pain.

I recently hit this exact wall while building PropSign, a POPIA-compliant electronic document signing platform for South African real estate agents.

We needed to generate legally binding, ECTA-compliant PDF mandates and lease agreements on the fly. The PDF needed to look identical to the web view, support custom agency branding, and include complex audit trails.

Instead of adding heavy server-side dependencies, I decided to use the most underrated PDF engine available: the user's own browser.

Here is how I built a zero-dependency PDF generator using Next.js 15, Tailwind CSS, and window.print().

The Architecture

PropSign is a Next.js App Router application backed by Convex for the database and Clerk for authentication.

When an agent needs to download a signed mandate, they don't hit an API endpoint that generates a file. Instead, they hit a dedicated Next.js route: /dashboard/documents/[id]/print.

1. The Dedicated Print Route

The secret sauce is isolating the document in its own route layout. You do not want your navigation bars, sidebars, or chat widgets rendering in the PDF.

I created a specific print page that fetches the document data from Convex and renders it in a pure, unstyled container.

// app/dashboard/documents/[id]/print/page.tsx

"use client";
import { useEffect } from "react";
import { useQuery } from "convex/react";
import { api } from "@/convex/_generated/api";

export default function PrintPage({ params }: { params: { id: string } }) {
  const document = useQuery(api.documents.getById, { id: params.id });

  useEffect(() => {
    // Automatically trigger the print dialog once the data loads
    if (document) {
       setTimeout(() => {
         window.print();
       }, 500); 
    }
  }, [document]);

  if (!document) return <div>Loading...</div>;

  return (
    <div className="print:m-0 print:p-0 bg-white text-black">
      {/* Force page breaks for legal clauses */}
      <div className="break-after-page">
        <h1 className="text-2xl font-bold">{document.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: document.body }} />
      </div>

      {/* Audit Trail Section */}
      <div className="mt-10 pt-10 border-t border-gray-300 break-inside-avoid">
         <h3 className="font-bold">ECTA Audit Trail</h3>
         <p>Signed by: {document.signatoryName}</p>
         <p>IP Address: {document.ipAddress}</p>
         <p>Timestamp: {new Date(document.signedAt).toISOString()}</p>
      </div>
    </div>
  );
}
Enter fullscreen mode Exit fullscreen mode

2. Forcing Background Graphics

By default, Chrome and Safari will strip out background colors and images when printing. For a SaaS like PropSign where agency branding and logos are crucial, this is a dealbreaker.

You can force the browser to render them by adding this single line of CSS to your global stylesheet:

@media print {
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}
Enter fullscreen mode Exit fullscreen mode

Why this approach wins

  1. Zero Server Costs: Generating PDFs on a server uses serious compute. Offloading this to the client's browser means it costs me absolutely nothing.
  2. Instant Rendering: There is no waiting for a serverless function to cold-boot or a queue to process. The user clicks "Download," the route loads in milliseconds, and the PDF dialog appears.
  3. Perfect Fidelity: What the client sees on the screen when they sign is exactly what the PDF looks like, down to the pixel.
  4. Pushing for a Greener Earth: The real estate industry is notorious for printing massive stacks of paper for every mandate and FICA request. By keeping the entire workflow digital and generating perfect digital PDFs only when absolutely necessary, this architecture directly supports PropSign's mission to push agencies toward a fully paperless, environmentally friendly future.

The Takeaway

If you are building a B2B SaaS and need document generation, don't immediately reach for a heavy backend library. Modern browser print engines are incredibly powerful if you structure your HTML and CSS correctly.

If you are curious about how we handle the rest of the architecture, including mandatory POPIA consent flows and AI document summaries, you can check out our guide on PropSign's POPIA Compliance Architecture here.

What are you currently using for PDF generation in your stack? Let me know in the comments!

Top comments (0)