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

Manage a Domain Token

A domain token 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 tokens for your corresponding domains. Each token 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 tokens.

On the Manage Domain page, you can generate multiple tokens 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 token binds to an exact domain, subdomain or IP address.

Accepted formats 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 token binds to a single root domain and automatically includes all of its subdomains.

For example, a token 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 Domain Token

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

JSX

App.jsx

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

const YOUR_DOMAIN_TOKEN = ''

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

TSX

App.tsx

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

const YOUR_DOMAIN_TOKEN = ''

function App() {
  return (
    <RPConfig licenseKey={YOUR_DOMAIN_TOKEN}>
      {/* 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 domain token per environment.

Step 1: Define Environment Varaibles

React vite

.env

# .env.development
VITE_RP_DOMAIN_TOKEN="Your Dev Domain Token"

# .env.staging
VITE_RP_DOMAIN_TOKEN="Your Staging Domain Token"

# .env.production
VITE_RP_DOMAIN_TOKEN="Your Prod Domain Token"

Nextjs

.env

# .env.development
NEXT_PUBLIC_DOMAIN_TOKEN="Your Dev Domain Token"

# .env.test
NEXT_PUBLIC_DOMAIN_TOKEN="Your Staging Domain Token"

# .env.production
NEXT_PUBLIC_DOMAIN_TOKEN="Your Prod Domain Token"

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 DOMAIN_TOKEN = import.meta.env.VITE_RP_DOMAIN_TOKEN

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

Nextjs

const DOMAIN_TOKEN = process.env.NEXT_PUBLIC_RP_DOMAIN_TOKEN

<RPConfig licenseKey={DOMAIN_TOKEN}>
    ...
    <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 from React PDF Kit.

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 "@react-pdf-kit/viewer";

const domainTokenMap: 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_DOMAIN_TOKEN = domainTokenMap[currentHost] ?? "";

  return (
    <RPConfig licenseKey={YOUR_DOMAIN_TOKEN}>
      <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 React PDF Viewer component to initialize the license and remove the watermark without exposing license on the client side.