You can test both developer and organization features for free. However, to remove watermark from React PDF, a valid license is required. Please purchase a commercial license

Manage a License Key

A license key is a unique key that unlocks React PDF for a domain, subdomain, or IP address. It authenticates your licensed usage and removes the watermark in the viewer.

After purchasing a license, you will receive an email with instructions on how to generate license keys for your corresponding domains. Each key must be bound to a corresponding domain, subdomain or IP address.

You could also access the License Manager page directly to create and manage your keys.

On the Manage License Key page, you can generate multiple keys per license. However, each token can only be linked to a single domain or subdomain/IP, using one of the following types: Specific Host and Wildcard.

Specific Host

A specific host license key binds to an exact domain, subdomain or IP address. Accepted values include:

• Localhost (e.g., localhost:3000, localhost:5173) for local development
• Domain names (e.g., test.example.com, www.example.com)
• IP addresses and non-standard ports (e.g., 192.168.1.1, 127.0.0.1:5173)

⚠️ Only exact matches are supported. For example, a token for example.com will not cover subdomains like www.example.com or xyz.example.com. These must be added separately.

Wildcard

Wildcard is only available with an Organization license.

A Wildcard license key binds to a single root domain and automatically includes all of its subdomains.

For example, a key binded to your-domain.com will also cover:

• app.your-domain.com
• dev.your-domain.com
• admin.your-domain.com

Remark: For more details, refer to the License Agreement

Use a license key

After creating a license key for your domain on the License Manager page, here is how you can add a license key in your project.

JSX

App.jsx

import { RPConfig } from '@pdf-viewer/react'
import AppPdfViewer from './AppPdfViewer'

const YOUR_LICENSE_KEY = ''

function App() {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      {/* A reusable React PDF viewer component */}
      <AppPdfViewer />
    </RPConfig>
  )
}
export default App

TSX

App.tsx

import { RPConfig } from '@pdf-viewer/react'
import AppPdfViewer from './AppPdfViewer'

const YOUR_LICENSE_KEY = ''

function App() {
  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      {/* A reusable React PDF viewer component */}
      <AppPdfViewer />
    </RPConfig>
  )
}
export default App

Use License Keys for Different Environments

If you have different environments for your project, you may set up an .env file to config one license key per environment.

Step 1: Define Environment Variables

React vite

.env

# .env.development
VITE_RP_LICENSE_KEY="Your Dev License Key"

# .env.staging
VITE_RP_LICENSE_KEY="Your Staging License Key"

# .env.production
VITE_RP_LICENSE_KEY="Your Prod License Key"

Nextjs

.env

# .env.development
NEXT_PUBLIC_LICENSE_KEY="Your Dev License Key"

# .env.test
NEXT_PUBLIC_LICENSE_KEY="Your Test License Key"

# .env.production
NEXT_PUBLIC_LICENSE_KEY="Your Prod License Key"

Step 2: Configure Each Key in CI/CD Pipeline

After defining environment variables for each environment, you can configure them in your CI/CD pipeline so your application can access the correct license key per environment.

Example: Vercel Configuration

1. Navigate to your Vercel project → Settings → Environment Variables
2. Add the following variables for each environment:

Step 3: Import license key

Import license key from .env and use it on RPConfig

React vite

const LICENSE_KEY = import.meta.env.VITE_RP_LICENSE_LKEY

<RPConfig licenseKey={LICENSE_KEY}>
    ...
    <AppPdfViewer />
</RPConfig>

Nextjs

const LICENSE_KEY = process.env.NEXT_PUBLIC_RP_LICENSE_LKEY

<RPConfig licenseKey={LICENSE_KEY}>
    ...
    <AppPdfViewer />
</RPConfig>

Use License Keys for Multiple Domains

If your application needs to run on multiple domains or subdomains, you could map the license keys on the client-side or server-side to authenticate the license and remove watermark.

For example, you have a Viewer Organization license and you are running an application that serves clients with different domains:

• Domain 1: example.com
• Domain 2: classic-example.com
• Domain 3: complex-example.com

Front-End Implementation

import { RPConfig, RPPages, RPProvider } from "@pdf-viewer/react";

const licenseKeyMap: Record<string, string> = {
  localhost: "Your Dev Domain Token",
  "localhost:5173": "Your Dev Domain Token",
  "example.com": "Your Prod Domain Token",
  "classic-example.com": "Your Classic Domain Token",
  "complex-example.com": "Your Complex Domain Token",
};

const pdfFileSource =
  "https://raw.githubusercontent.com/mozilla/pdf.js/ba2edeae/web/compressed.tracemonkey-pldi-09.pdf";

export default function App() {
  const currentHost = window.location.host;
  const YOUR_LICENSE_KEY = licenseKeyMap[currentHost] ?? "";

  return (
    <RPConfig licenseKey={YOUR_LICENSE_KEY}>
      <RPProvider src={pdfFileSource}>
        <RPPages />
      </RPProvider>
    </RPConfig>
  );
}

Back-End Implementation

If you’re looking for a more dynamic and secure license authentication approach, you could fetch the host from the client side and match the right license key via a REST API.

This approach allows the PDF Viewer to initialize the license and remove the watermark without exposing license on the client side.