Documentation

Read the official documentation.

Overview

React PDF Builder is a fully themeable component framework built on react-pdf and pdfkit.

The framework includes 30+ ready-to-use components for headings, paragraphs, lists, tables, buttons, cards, and more.

If you want to build beautiful PDFs in React without starting from scratch, this is the library for you!

Features include:

• 🌟 30+ pre-made components to make building PDFs a breeze
  • Styled and done for you, so you can start building right away.
• 🎨 Fully themeable with built-in light and dark modes
  • All colors and component props can be overridden easily, and class names are supported.
• 📏 Scalable to any page size
  • Easily scale all components to match your preferred size.
• 🖋️ Drop-in support for 25 commonly used fonts, with bold & italics
  • Easily use popular fonts like Roboto, Lato, Raleway, or Montserrat—including formatting styles!
• 🥳 Support for 5 different emoji sets
  • Enable 5 different emoji sets by JoyPixels, Noto Emoji, OpenMoji, or Twemoji, with one line of code.
• 📊 Table support with page wrapping, theming, and colspans
  • Need tables? Look no further. Beautiful tables are at your fingertips.
• 🟦 Easy to use gradient backdrops for your pages
  • Quickly and easily spruce up your PDF with gradient backdrops, with optional pre-made decorators.
• 📦 Box layout system using Flexbox
  • If you're familiar with CSS Flexbox, you'll feel right at home using the Box component to lay out your design.
• 🔧 Built on well-maintained libraries
  • This component framework is built on react-pdf and pdfkit, which are maintained by only the best and brightest.
• 🚀 Much more!
  • Dive into the documentation to learn more!

Donate

If this project helped save you time, please consider buying me a coffee, which powers my development (and life). Your support is much appreciated!

Table of Contents

• Documentation
• Overview
  • Features include:
• Donate
• Table of Contents
• Installation
• Quick Start
• Why use React PDF Builder?
• How to use React PDF Builder
• Components overview
• Themes
• Utility class names
• Fonts and formatting
• Downloading PDFs
• Advanced
• TypeScript
• Icon Attribution
• Contributing
• ⭐ Found It Helpful? Star It!
• License

Installation

npm i @react-pdf/renderer react-pdf-builder 

Note: This project has a dependency on @react-pdf/renderer. Make sure it's installed along with react-pdf-builder.

Quick Start

Below is a component that renders a standard A4 size PDF with a heading, paragraph, button, and custom styled div. You can use this as a starting point.

Most components can be themed using the swatch prop, and custom styled with CSS using style or className.

Use LETTER page size for 8.5x11" paper used in the USA.

import React from 'react';
import { Fonts, Themes, ThemedPage, Div, Button, Box, PDFThemeProvider, Heading3, Paragraph } from 'react-pdf-builder'
import { Document, Font, PDFViewer } from '@react-pdf/renderer';

export const QuickStart = () => {
  const roboto = Fonts.load(Fonts.sansSerif.roboto);
  Font.register(roboto);
  Font.registerEmojiSource(Fonts.emojis.joyPixels());
  const theme = Themes.default.build({
    scale: 1,
    override: {
      classNames: { 'my-custom-class': { color: 'white', backgroundColor: 'darkblue', padding: 10 } },
    },
  });
  return (
    <PDFViewer style={{ height: 700, width: 500 }}>
      <Document>
        <PDFThemeProvider theme={theme}>
          <ThemedPage size="A4" style={{ fontFamily: roboto.family }}>
            <Box dir="y" className="gap-3">
              <Heading3 rule>Hello, world!</Heading3>
              <Paragraph className="mb-0">Let's get started building the PDF.</Paragraph>
              <Box>
                <Button href="#">Button</Button>
              </Box>
              <Div className="my-custom-class w-50">50% Div with a custom class. 👍</Div>
            </Box>
          </ThemedPage>
        </PDFThemeProvider>
      </Document>
    </PDFViewer>
  );
};

This will create the following PDF:

Click here to see a live demo of this quick start.

You can also see the main project demo for a deeper look at what's possible with this library.

Why use React PDF Builder?

This framework's underlying library, react-pdf, gives you everything you need to build a beautiful PDF, and is likely the best React PDF renderer that exists.

And while it's definitely amazing in its own right... you'll have to build your PDF entirely from scratch.

There are no headings, no tables, no buttons, no lists. Instead, you'll have to define styles for every single element in your PDF.

This can be a huge hassle when all you want is to start building!

Enter React PDF Builder.

This framework provides a set of 30+ pre-made components based on Bootstrap 5 that can help you bring your PDF to life quickly and easily.

The framework also gives you the ability to define class names to style your PDF components.

In addition, there's drop in support for 25 fonts with bold and italics, and 5 different sets of emojis.

All ready to go, so you can start building immediately.

How to use React PDF Builder

Follow the quick start above to get up and running quickly.

Then check out the components overview for the components you have at your disposal. Each component page has a live example at the bottom.

You may also want to familiarize yourself with react-pdf, the library this framework is built upon, for the basics.

Components overview

You can see all the available components here.

Themes

React PDF Builder includes a robust theme system that allows you to quickly and easily style the components in the framework.

The framework includes both a light and dark theme based on Bootstrap 5.

Most components support a swatch prop that lets you quickly style the component's colors using the theme's color scheme. For instance, to swatch a Table to blue, give it the "blue" swatch. You can see all swatch colors here.

Want to tweak a theme's appearance? You can override and define your own custom colors, borders, class names, spacing—you name it.

You can read more about themes here.

Utility class names

The framework includes a large catalog of utility classes to make styling your PDF components easy (and concise). Utility classes are adapted from Bootstrap 5, so you may already be familiar with them.

You can see all utility classes here.

Fonts and formatting

React PDF Builder includes 25 drop-in fonts, ready to use, and supports the Latin charset (used for English) with bold and italic formatting.

All built-in fonts are hosted via jsdelivr, but you can self-host them too if you'd like.

The framework also includes drop-in support for 5 different emoji sets by JoyPixels, Noto Emoji, OpenMoji, and Twemoji. Read more about emoji support here.

Downloading PDFs

If you'd like to make your PDF Document downloadable via a link, you can use the PDFDownloadLink from react-pdf.

Advanced

For topics like page wrapping, document navigation, and dynamic content, see the Advanced documentation for react-pdf.

TypeScript

Type definitions have been included for TypeScript support.

Icon Attribution

Favicon by Twemoji.

Contributing

Open source software is awesome and so are you. 😎

Feel free to submit a pull request for bugs or additions, and make sure to update tests as appropriate. If you find a mistake in the docs, send a PR! Even the smallest changes help.

For major changes, open an issue first to discuss what you'd like to change.

⭐ Found It Helpful? Star It!

If you found this project helpful, let the community know by giving it a star: 👉⭐

Want to support the project? Feel free to grab me a coffee, which is my main source of fuel for development:

License

See LICENSE.md.