Introducing react-easy-pdf – Easy PDF Generation for React

Introduction

Generating PDFs directly from the frontend has always been a tricky process—especially when you want fine control, security, and zero exposure of sensitive API keys. I recently faced this same problem while building a React-based solution.

In this post, I’ll walk you through the challenge I faced, the solution I designed, and how react-easy-pdf came to life as a developer-friendly library — now available in beta.

Problem Statement

Here’s the situation I encountered, which may sound familiar if you’ve ever tried to export HTML to PDF from your frontend:

• You need to generate a PDF based on dynamic HTML content on the frontend.

• You want to protect your API keys and business logic.

• You don’t want your frontend to directly talk to the actual PDF service due to security reasons.

• You want a smooth experience inside your React app.

There were some existing solutions out there, but either they required exposing keys, bundling heavy libraries on the frontend, or setting up a complex backend.

I needed something minimal, yet powerful.

How I Ended Up Building a Workable (and Experimental) Solution

I wanted a way to:

• Keep the frontend clean and developer-friendly.

• Offload the actual PDF generation to a secured microservice.

• Encrypt the HTML content before sending it to the PDF service.

• Control the PDF output fully — size, scale, margins, filename, etc.

And it worked.

After multiple prototypes, I ended up creating a hook-based utility that just feels native inside React projects. It's still in active development, so small bugs might exist, but it's already highly usable.

How It Works

Here’s a high-level explanation of how the library works behind the scenes — without exposing any sensitive details:

React Frontend

You define your HTML content inside your React component and reference it using ref. You then use the useEasyPdf() hook to manually trigger the PDF generation whenever you want.

Your Backend Proxy

Instead of calling the PDF service directly from the frontend, you send the HTML to your own backend. This gives you complete control and ensures your API keys stay safe.

The backend:

• Receives HTML via FormData

• Encrypts the HTML for security

• Adds the required metadata (like page size, margins, scale, etc.)

• Injects your secret API key

• Forwards everything to the actual PDF microservice

PDF Microservice

The microservice processes the encrypted HTML and renders it into a PDF buffer, which is securely sent back to your backend.

Your Backend → React Frontend

Your backend simply streams the PDF buffer back to the frontend where you can either:

• Auto-download it

• Preview it

• Store it All based on what you want to do.

Try the Beta Now

You can install the beta release from npm:

npm package: https://www.npmjs.com/package/react-easy-pdf

The docs cover everything from setup to usage and error handling.

Support the Project

If this tool helped simplify your workflow or saved you hours of setup and debugging, consider supporting me here:

Ko-fi: https://ko-fi.com/vikramsamak

Your support helps me continue developing and maintaining this open-source tool.

Final Thoughts

This is just the beginning.

In the coming updates, I’ll be focusing on:

• More precise PDF rendering, especially layout-wise

• Implementing robust error handling to cover edge cases better

Since this is still in beta, your feedback and suggestions are highly appreciated.

If you're a React developer looking for a secure and flexible way to generate PDFs — Give it a try:** react-easy-pdf on npm Star it · Break it · Test it · Report issues

Let me know how it fits into your workflow — I’d love to hear your use cases!