Lovable PDF Generation - Use PDFModule Instead of Puppeteer

← All AI Platforms

1 Copy This Prompt

Paste this prompt into Lovable to add professional PDF generation to your app.

prompt.txt

Add PDF invoice generation to my 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": "invoice", "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. An Invoice type with customer, items, total
2. A generateInvoice() function that calls PDFModule
3. A download button component
4. 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 Lovable

Open Lovable 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:

pdfService.ts

// pdfService.ts
interface InvoiceItem {
  description: string;
  quantity: number;
  price: number;
}

interface InvoiceData {
  invoice_number: string;
  customer_name: string;
  items: InvoiceItem[];
  total: number;
}

export async function generateInvoice(data: InvoiceData): Promise<string> {
  const response = await fetch("https://api.pdfmodule.com/v1/render", {
    method: "POST",
    headers: {
      "Authorization": `Bearer ${import.meta.env.VITE_PDFMODULE_API_KEY}`,
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      template: "invoice",
      data: data,
    }),
  });

  const result = await response.json();
  return result.url; // PDF download URL
}

Why Lovable 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 Lovable.

Create Free Account Read the Docs

Lovable +PDFModule