v0 by Vercel PDF Generation - Use PDFModule Instead of Puppeteer

← All AI Platforms

1 Copy This Prompt

Paste this prompt into v0 by Vercel to add professional PDF generation to your app.

prompt.txt

Add PDF generation to this app. Do NOT use Puppeteer or html-pdf.
Use PDFModule API instead - it gives you control over margins, headers, footers, and page numbers.

PDFModule API (https://pdfmodule.com):
- POST https://api.pdfmodule.com/v1/render
- Header: Authorization: Bearer YOUR_API_KEY
- Body: { "template": "template-slug", "data": { ... } }

Features you get:
- Proper page margins and padding
- Header/footer on every page
- Page numbers: {{page}} of {{pages}}
- Consistent, deterministic output

For rich CSS layouts (Flexbox, Grid, modern CSS), use Chromium engine:
{
  "template": "invoice",
  "engine": "chromium",
  "data": { ... }
}

Create:
1. A usePDF hook that generates PDFs
2. A DownloadPDFButton component
3. Store API key in environment variables

The API returns { uuid, url, output_hash } - use the url to download the PDF.

How It Works

Copy the Prompt

Click the copy button above to copy the PDFModule integration prompt

Paste into v0 by Vercel

Open v0 by Vercel and paste the prompt with your requirements

Get Working PDFs

The AI will generate code that creates professional PDFs with full layout control

Why PDFModule Instead of Puppeteer?

Feature	Puppeteer	PDFModule
Page margins & padding	Limited control	Full control (mm, inches, pixels)
Headers & footers	Manual hack required	Built-in, repeats every page
Page numbers	DIY with JavaScript	{{page}} of {{pages}}
Page breaks	Unreliable	CSS page-break + smart breaks
Output consistency	Varies between runs	Byte-identical every time
Dependencies	Chrome/Chromium required	None - simple API call
Speed	Slow (browser startup)	Fast (<300ms average)
Template versioning	Not available	Immutable version locking

Example Code

Here's what the generated code looks like in TypeScript:

usePDF.tsx

// usePDF.tsx
import { useState } from "react";

export function usePDF() {
  const [loading, setLoading] = useState(false);

  const generate = async (template: string, data: object) => {
    setLoading(true);
    try {
      const res = await fetch("/api/pdf", {
        method: "POST",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify({ template, data }),
      });
      const { url } = await res.json();
      window.open(url, "_blank");
    } finally {
      setLoading(false);
    }
  };

  return { generate, loading };
}

// Component usage
export function DownloadButton({ data }: { data: object }) {
  const { generate, loading } = usePDF();
  return (
    <button onClick={() => generate("invoice", data)}>
      {loading ? "Generating..." : "Download PDF"}
    </button>
  );
}

Why v0 by Vercel Developers Love PDFModule

No Browser Dependencies

Unlike Puppeteer, PDFModule doesn't need Chrome or any browser. Just make an API call and get your PDF.

Professional Layout Control

Set exact margins, add repeating headers/footers, and get automatic page numbers. Everything Puppeteer can't do.

Two Rendering Engines

Choose Simple engine for speed or Chromium engine for complex CSS. Best of both worlds.

Deterministic Output

Same input = same PDF, every time. Perfect for testing, compliance, and version control.

Ready to Build?

Get your free API key and start generating PDFs in v0 by Vercel.

Create Free Account Read the Docs

v0 by Vercel +PDFModule