How to generate PDFs in the browser with Javascript (no server needed)

generate pdfs in the browser with javascript
generate pdfs in the browser with javascript
generate pdfs in the browser with javascript

Whether you’re building a form submission workflow, generating customer invoices, or creating printable certificates, chances are you’ve run into the need to produce a polished PDF. Traditionally, this meant sending data to a server, rendering the document there, and then downloading the final file to the client.

But what if you could do it all in the browser?

Thanks to a growing ecosystem of open-source JavaScript libraries, you can now generate full-featured PDFs entirely on the client side—no server-side rendering, no infrastructure setup, and no data ever leaving the user’s machine. That’s a big win for privacy, performance, and flexibility.

In this article, we’ll walk through how browser-based PDF generation works, compare the most popular open-source libraries, and share practical examples to help you get started. We’ll also explore where these tools shine—and where they start to fall short—so you can build the right solution from the start.

Why Client-Side PDF Generation Matters

Generating PDFs directly in the browser isn’t just a neat trick—it can be a game changer for web applications.

Traditionally, developers relied on server-side libraries written in Python, PHP, Java, or Node.js to generate PDFs. While powerful, these server-based workflows come with downsides: added infrastructure, latency, data privacy concerns, and more moving parts to manage.

Modern JavaScript libraries flip this model by letting the browser do the work. That shift unlocks several key benefits:

  • No Server Required: You don’t need to maintain a backend or cloud service just to generate PDFs. Everything happens on the client.

  • Improved Privacy: Sensitive data—like personal information, form submissions, or invoices—never leaves the user’s device.

  • Faster Feedback Loops: Users get their PDF instantly, without the delay of uploading, processing, and downloading from a remote server.

  • Scalability by Default: Instead of pushing all PDF generation work to your backend, you offload the processing to each user’s browser.

  • Offline Capabilities: PDF generation can work without an internet connection—ideal for PWAs, field apps, and edge workflows.

For frontend developers, this means less dependency on backend infrastructure and more control over the user experience.

Exploring Your Toolkit: Open Source JavaScript Libraries

If you want to generate PDFs in the browser, you're in luck—there’s a mature ecosystem of open-source libraries that require no backend, plugins, or server setup. Each library has a distinct approach, and choosing the right one depends on your use case.

Let’s break down the three most widely used client-side PDF libraries—each with its own sweet spot:

1. jsPDF — The Lightweight Drawing API

One of the oldest and most widely adopted libraries, jsPDF gives you low-level control over PDF output. You position text and shapes using X/Y coordinates—much like drawing on a canvas.

Best for: Simple documents where you need direct, pixel-level control

Example Use Case: Generating a custom receipt or certificate with fixed formatting

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>jsPDF Receipt Example</title>
</head>
<body>
  <h1>jsPDF Example</h1>
  <button onclick="generateReceipt()">Generate Receipt PDF</button>

  <!-- Load jsPDF from CDN -->
  <script src="<https://unpkg.com/jspdf@2.5.1/dist/jspdf.umd.min.js>"></script>
  <script>
    const { jsPDF } = window.jspdf;

    function generateReceipt() {
      const doc = new jsPDF();

      doc.setFontSize(18);
      doc.text("Sales Receipt", 10, 20);

      doc.setFontSize(12);
      doc.text("Date: 2025-06-14", 10, 30);
      doc.text("Customer: John Doe", 10, 40);
      doc.text("Item: Widget X", 10, 50);
      doc.text("Total: $42.00", 10, 60);

      doc.line(10, 65, 100, 65);
      doc.text("Thank you for your purchase!", 10, 75);

      doc.save("receipt.pdf");
    }
  </script>
</body>
</html>

This imperative approach gives you full control—but you’re responsible for layout.

2. pdf-lib — Modern, Powerful, and Modular

pdf-lib is a TypeScript-first library designed for flexibility and composability. It lets you create new PDFs or modify existing ones—embedding fonts, images, and even merging files.

Best for: Advanced workflows involving form-filling, PDF editing, or programmatic composition Example Use Case: Injecting an image (e.g., company logo) and drawing styled text on a generated page

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>pdf-lib Example</title>
</head>
<body>
  <h2>pdf-lib Demo</h2>
  <button id="generateBtn">Generate PDF</button>

  <script type="module">
    import { PDFDocument, rgb, StandardFonts } from '<https://cdn.skypack.dev/pdf-lib>';

    document.getElementById('generateBtn').addEventListener('click', async () => {
      const pdfDoc = await PDFDocument.create();
      const page = pdfDoc.addPage([600, 400]);

      const font = await pdfDoc.embedFont(StandardFonts.HelveticaBold);
      page.setFont(font);
      page.setFontSize(24);
      page.drawText("Welcome to MyApp!", {
        x: 50,
        y: 350,
        color: rgb(0.2, 0.4, 0.8)
      });

      // Safe CORS-compliant image
      const imageUrl = '<https://upload.wikimedia.org/wikipedia/commons/thumb/a/a3/June_odd-eyed-cat.jpg/320px-June_odd-eyed-cat.jpg>';
      const imgBytes = await fetch(imageUrl).then(res => res.arrayBuffer());
      const jpgImage = await pdfDoc.embedJpg(imgBytes);
      page.drawImage(jpgImage, {
        x: 50,
        y: 150,
        width: 100,
        height: 100
      });

      const pdfBytes = await pdfDoc.save();
      const blob = new Blob([pdfBytes], { type: 'application/pdf' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'branded-pdflib-doc.pdf';
      a.click();
      URL.revokeObjectURL(url);
    });
  </script>
</body>
</html>

Its async nature supports advanced features while keeping things performant.

3. pdfmake — Declarative Layouts for Complex Docs

Instead of specifying coordinates, pdfmake uses a JSON-based structure to define document content. You describe paragraphs, tables, lists, and layouts in a declarative style—and it handles the rendering.

Best for: Structured documents like reports, resumes, and invoices Example Use Case: Generating a table-based invoice with customer info, itemized rows, and total

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>pdfmake Invoice Example</title>
</head>
<body>
  <h1>pdfmake Example</h1>
  <button onclick="generateInvoice()">Generate Invoice PDF</button>

  <!-- Load pdfmake and default font support -->
  <script src="<https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/pdfmake.min.js>"></script>
  <script src="<https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.2.7/vfs_fonts.js>"></script>

  <script>
    function generateInvoice() {
      const docDefinition = {
        content: [
          { text: "Invoice", style: "header" },
          { text: "Customer: Jane Smith", margin: [0, 10, 0, 10] },
          {
            table: {
              headerRows: 1,
              widths: ["*", "auto", "auto"],
              body: [
                ["Item", "Qty", "Price"],
                ["Widget A", "2", "$10.00"],
                ["Widget B", "1", "$22.00"],
                [{ text: "Total", bold: true }, "", "$42.00"]
              ]
            }
          },
          { text: "Thank you for your business!", margin: [0, 20, 0, 0] }
        ],
        styles: {
          header: { fontSize: 18, bold: true }
        }
      };

      pdfMake.createPdf(docDefinition).download("invoice.pdf");
    }
  </script>
</body>
</html>

This approach is especially helpful when content is template-driven or user-generated.

Each library has trade-offs, and many developers combine them depending on the task. But no matter which you choose, they all offer a serverless path to PDF generation entirely within the browser.

Challenges and Limitations of Client-Side PDF Generation

Generating PDFs in the browser is powerful—but not without trade-offs. Even the best tools can stumble when pushed beyond their ideal use cases. Here are the most common challenges developers face when working with client-side libraries:

Layout Control vs. Abstraction

  • Low-level libraries like jsPDF offer precise positioning, but require you to manually handle X/Y coordinates for every element.

  • High-level libraries like pdfmake manage layout for you, but may lack flexibility for advanced or pixel-perfect designs.

  • pdf-lib sits in the middle, giving you drawing primitives without full layout abstraction.

This means your choice of library often comes down to how much control—or convenience—you need.

Font Embedding and Rendering

While most libraries support standard fonts like Helvetica, using custom fonts adds complexity:

  • You may need to embed the font yourself as a binary asset.

  • Font files increase output size.

  • Rendering quirks can occur if the browser or PDF viewer handles font hinting differently.

Getting consistent typography across devices means being deliberate with font choices and testing thoroughly.

Performance and File Size

PDF generation happens in the user’s browser—so:

  • Large images or many pages can cause noticeable lag.

  • Complex PDFs may freeze the UI or cause memory spikes.

  • Mobile devices are especially vulnerable to performance issues.

Consider lazy generation, compressing images before embedding, or splitting long documents into smaller ones.

Styling Constraints

Client-side libraries don’t support CSS like display: flex or position: relative. Instead, you use their own APIs:

  • jsPDF requires you to set positions manually.

  • pdfmake uses a JSON schema for layout and styles.

  • pdf-lib uses function calls to draw text, shapes, and images.

If you’re trying to replicate a full HTML layout in a PDF, expect to re-implement much of your design logic in JavaScript.

Lack of Complex HTML-to-PDF Support

Libraries like jsPDF, pdf-lib, and pdfmake don’t convert HTML+CSS into PDFs.

You can’t just pass in a DOM element and expect a pixel-perfect PDF.

If that’s your use case (e.g. printing an invoice styled with Bootstrap), you may need:

  • Server-side rendering (e.g. Puppeteer or wkhtmltopdf)

  • Commercial HTML-to-PDF tools

  • A redesign of the layout using drawing primitives

Async Loading and Bundle Size

Most modern PDF libraries—especially pdf-lib and pdfmake—are non-trivial in size:

  • pdf-lib is around 400–500 KB minified.

  • pdfmake is even larger due to embedded font files.

  • Tree-shaking may help, but full optimization isn’t always possible.

In addition, some libraries (like pdf-lib) rely on async functions to fetch fonts, images, or load existing documents. This can delay rendering or require await chains that must be handled gracefully in your app. On the flip side, this async design also enables dynamic generation based on user input or remote assets—making it highly flexible for interactive applications.

If performance and initial load times matter, consider lazy-loading the PDF module only when needed, and avoid bundling it into your main application bundle.

Browser Compatibility and CORS Caveats

Most modern browsers fully support the APIs used by these libraries—like Blob, Canvas, and TypedArray—but edge cases do exist:

  • Safari and Firefox may handle downloads or blob: URLs differently

  • Mobile browsers may struggle with memory-heavy operations

  • Internet Explorer is not supported by most libraries

Also, if your document includes external images or fonts, you’ll need to consider CORS (Cross-Origin Resource Sharing):

  • Images loaded from third-party domains must allow cross-origin access via proper headers.

  • If not, the browser will block them—and your PDF may generate with missing assets or crash altogether.

To avoid this:

  • Host your assets on a CORS-compliant CDN

  • Or embed images as Base64 if the size is manageable

🔒 CORS isn’t a limitation of the PDF libraries—it’s a browser security model designed to protect users from unauthorized data access.

These challenges don’t make client-side PDF generation a bad choice. But they highlight why understanding your document’s complexity, audience, and platform is key to choosing the right approach.

In the next section, we’ll zoom out and compare the three open-source libraries more directly—so you can make an informed choice based on your real-world needs.

Choosing the Right Tool for the Job

Now that you've seen how jsPDF, pdf-lib, and pdfmake work in practice, you might be wondering: which one’s right for your project?

Each library takes a fundamentally different approach to PDF generation—and those differences matter when it comes to layout control, workflow complexity, and styling behavior.

At a Glance

Library

Best For

Control Level

Layout Style

Learning Curve

jsPDF

Simple exports like receipts, labels, or tickets

High (manual drawing)

Absolute (XY-based)

Low

pdf-lib

Dynamic content, form field injection, font/image handling

High (programmatic)

Object-oriented

Moderate

pdfmake

Reports, invoices, structured layouts

Moderate

Declarative (JSON)

Moderate

Summary of Use Cases

  • Reach for jsPDF when you want fast, direct control over every element’s position. Perfect for receipts, name badges, or static certificates where you're “drawing” the output manually.

  • Use pdf-lib if you need to embed images or fonts, dynamically compose content, or manipulate existing PDFs. It’s powerful for branded docs, custom form generators, and workflows that evolve over time.

  • Choose pdfmake when you need structured layouts like tables, sections, and styled text blocks. It excels at generating professional-looking documents like invoices, resumes, and reports with consistent formatting.

💡 Dev Tip: Think of jsPDF like painting on a blank canvas, pdf-lib like assembling pages with precision tools, and pdfmake like filling in a smart document template.

Font Handling: Small Detail, Big Impact

One subtle but important difference among these libraries is how they handle fonts:

  • jsPDF uses built-in fonts like Helvetica by default, with optional embedding via TTF.

  • pdf-lib lets you embed custom fonts explicitly—but you must load them manually.

  • pdfmake includes a default virtual font set but also supports embedding your own.

Why it matters: font behavior affects file size, styling consistency, and cross-platform rendering. Always test how your chosen library handles fonts before going to production.

Pro Tip

These tools aren’t mutually exclusive. Real-world projects often combine them:

  • Use pdfmake for templated invoices.

  • Use pdf-lib to inject content into dynamic or prebuilt PDFs.

  • Use PDF.js to preview everything right in the browser.

Your best bet? Start with a small prototype. Pick the library that gets you 80% of the way—and experiment with others if your needs grow.

When (and Why) to Consider Higher-Level Solutions

Browser-based libraries like jsPDF, pdf-lib, and pdfmake offer tremendous flexibility. But as your frontend workflows grow more dynamic, you might hit the limits of what these tools can do on their own—especially when your app goes beyond static file generation.

Signs You've Outgrown Low-Level Libraries

If you find yourself building complex document features entirely in the browser, you may be running into patterns that signal the need for a more structured, scalable approach:

  • Forms with conditional logic or dynamic field visibility

  • User input validation (e.g., required fields, custom formats)

  • Mapping JSON data into complex form layouts

  • Managing reusable templates or versioned form designs

  • Previewing and filling PDFs across desktop and mobile

  • Coordinating multi-step flows like submissions or approvals

These needs go beyond drawing boxes and adding fonts—they require logic, layout awareness, and maintainability that most low-level libraries weren’t designed to handle alone.

The Developer Dilemma

To bridge those gaps, developers often create workarounds—some clever, some brittle:

  • Building parallel JSON data models to match the layout structure

  • Manually syncing field logic across UI and PDF

  • Writing helper code to simulate dynamic behavior

  • Re-generating entire PDFs for minor changes or validation updates

These DIY approaches may work at first, but they become increasingly fragile, especially as form complexity, mobile responsiveness, and user expectations rise.

What High-Level Solutions Offer

Modern tools like Joyfill take a different approach—rethinking PDF generation from a data-first, logic-aware perspective:

  • Structured data over hardcoded layout: Define forms using JSON models rather than absolute positions.

  • Built-in validation and logic rules: Control visibility, required fields, and user behavior directly in the form definition.

  • Responsive, form-aware UIs: Let your documents adapt to screen sizes, user roles, or conditional logic—all in the browser.

  • Standards-compliant PDFs on demand: Output polished files only when needed—while keeping your logic and data separate.

This kind of separation—between content, logic, and layout—gives developers the flexibility to scale document features without scaling technical debt.

Whether you're building a complex field form, a versioned contract workflow, or a dynamic report interface, higher-level SDKs can free you from reinventing the wheel in JavaScript.

Final Thoughts: Build Smart, Ship Faster

Client-side PDF generation is no longer a niche capability—it’s a practical tool every modern web developer should know. With libraries like jsPDF, pdf-lib, and pdfmake, you can build everything from invoices to reports, certificates to receipts—all without touching a server.

You don’t need to spin up a backend just to create a PDF. You don’t need to expose sensitive data to external services. And you don’t need to wrestle with outdated desktop workflows just to get high-quality documents into the hands of your users.

But as your requirements grow—especially when working with complex forms, workflows, or large-scale PDF templates—you might find yourself needing more.

If you need to build PDF capabilities inside your SaaS application? Joyfill makes it easy for developers to natively build and embed form and PDF experiences inside their own SaaS applications.

Elmer Sia

Published: Jul 10, 2025

Published: Jul 10, 2025

form builder color glow bg

Getting started is easy

Schedule a demo call with our experts to learn more about Joyfill.

Request a demo

Forms as powerful as an app.

For Business
Built by Joyfill
Mobile Forms by Joyfill
For Developers
SDKs

© 2025 Joyfill LLC. All rights reserved.

form builder color glow bg

Getting started is easy

Schedule a demo call with our experts to learn more about Joyfill.

Request a demo

Forms as powerful as an app.

For Business
Built by Joyfill
Mobile Forms
For Developers
SDKs

© 2025 Joyfill LLC. All rights reserved.

form builder color glow bg

Getting started is easy

Schedule a demo call with our experts to learn more about Joyfill.

Request a demo

Forms as powerful as an app.

For Business
Built by Joyfill
Mobile Forms
For Developers
SDKs

© 2025 Joyfill LLC. All rights reserved.