How to Create a PDF Using Node, React PDF Generator, and Headless Chrome

Google's Puppeteer is a Node.js library that provides a high-level API for automating Chrome and other browsers. Leveraging this technology, we are easily able to use Node to generate PDFs using any JavaScript framework we wish.

In this post, we discuss how to build a React PDF Generator that leverages Puppeteer to generate styled PDFs. This article was first written in 2019, but the principles behind it are still valid today, and it's been updated to reflect current development methods.

Learn how to build a customizable PDF viewer in React.

We will use create-vite to quickly set up our front end development environment. Navigate to an empty directory and create a new React app by running:

Depending on your version of create-vite, you may be asked to choose a linter such as Oxlint or ESLint. For this article, I used Oxlint.

If the command asks you to install any packages, type 'y' to continue.

Once the project is generated, start the local server by running:

That will start serving the app. By default the location will be http://localhost:5173

Your default browser displays the default create-vite screen!

Now, let's clean up the project and set up our UI. First, delete all the code in src/App.jsx, except the outer div:

Let's also delete all the unused files that come with the template. Delete the images and .svg files in src/assets.

To make sure our UI fits inside the bounds of a PDF viewer, set up our UI to roughly match the default size of a PDF. Inside App.jsx, let's create a new div that will hold what we want to be shown in the PDF, and we will give that a class name so that we can style it using CSS. App.jsx looks something like this:

Now, set the .pdf class to match the size of a PDF. In src/App.css, delete all the existing CSS and replace it with:

If you check out http://localhost:5173/, you should see a gray background with a white 'pdf' in the middle!

This is still just HTML though, we will convert it into an actual PDF in a moment. First though, put some content inside our PDF. For this example, we'll use fake data, but you can do whatever you want here (fetch data from a remote server, for example).

Let's add some fake data to App.jsx:

Now, let's render these this data as a list of users. Create the file src/components/User.jsx and set up a component to render a user. The component should accept a user object as a prop.

As a simple example, the file might look like this:

Back in App.jsx, let's import this component and use it to render our user list. (For now, we will set the key as user.lastName since this is not production code.)

If you check out http://localhost:5173/ now, you'll see a simple list of users rendered in your "pdf".

We'll leave the UI as is, but you can do anything you want at this point to make the PDF look how you want. Go crazy, there are no limitations here.

It is important to note that what you see is what you get. When we generate the PDF, the PDF will look exactly like the content that is displayed since Puppeteer renders the page using an actual browser engine. This means your PDF can contain the same React components, CSS, fonts, charts, and images that appear in your application, rather than requiring a separate PDF layout system.

Our Node service needs Puppeteer. Install it with the following command:

Then, let's create our service. From the root of the project, make the file scripts/generate-pdf.cjs. This is the file that the service lives in.

The code for the service is actually pretty simple. Start by creating a new instance of Puppeteer and navigating it to our local server.

Note: The local server we set up in Steps 1 and 2 must be running! This means that http://localhost:5173/ (or whichever port you chose) must be serving your React project.

generate-pdf.js should look like this:

This code creates an in-memory instance of Chrome, creates a new tab, and navigates the tab to http://localhost:5173/. If you are unfamiliar with async/await syntax, I recommend learning about it.

We can now generate the PDF from the HTML that we have created! Luckily, Puppeteer provides an amazing API for this.

We'll add some code that tell Chrome to emulate a screen when it's generating the PDF, and also a call to page.pdf() to generate the PDF. We are also using a few options to make the PDF look the way we want.

Update generate-pdf.cjs to look like this:

You can also view additional page.pdf(options).

And that's it! Our service is done and we are ready to generate a PDF.

The last step is actually executing our script. In the root of the project there is a package.json file. Let's write a script to execute our file here. Add the following line to the scripts section in package.json:

In the root of the project, make sure http://localhost:5173 is still running, then run the following command:

When the script finishes, you'll find a react.pdf at the root of the project that matches your React UI.

Google's Puppeteer project created tons of opportunities in the PDF space. Using Node JS, Puppeteer, and HTML to generate PDFs, along with the CSS, we can easily generate PDFs by creating HTML then exporting to PDF.

We've seen that React and Puppeteer can create PDFs for you.

But maybe there's a simpler way.

The Apryse SDK allows you to generate PDFs directly from a template and data, with no intermediate step of rendering HTML in the browser. It also allows you programmatically manipulate PDFs, or apply redactions, or convert PDFs to DOCX files, or extract data from files, and much more.

So if you need more then, check out our video on generating PDF with Apryse's PDFNet Node.js SDK.

To view and annotate the generated PDFs in your website, download a free WebViewer trial, Apryse's JavaScript PDF viewer that allows you to open, edit, and annotate PDFs right in the browser (and much more!).

Also, check out our How to Build a PDF Viewer in React Native blog post.

If you have any questions regarding WebViewer or, this article, or anything else, please feel free to contact us.

[This document was originally published in 2019. It was extensively revised in August 2026 to use Vite rather than Create-react-app.]