> For the complete documentation index, see [llms.txt](https://docs.apryse.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.apryse.com/web/get-started/libraries-and-frameworks/react.md). # Build a React PDF viewer with Apryse WebViewer SDK and Vite Create a React (Vite) PDF viewer and editor with Apryse WebViewer. Learn how to integrate the SDK into your React apps and render PDFs in the viewer UI. Create React App was once the standard for scaffolding React applications, but it has since been deprecated in favor of tools like Vite. This guide shows how to build a React PDF viewer using the Apryse [WebViewer SDK](/web/what-is-webviewer/overview.md) with [React and Vite](https://react.dev/learn/build-a-react-app-from-scratch#vite). You’ll learn how to integrate the SDK into a React application to render, view, and interact with PDF documents using the WebViewer UI. You can also download a ready-to-use [GitHub sample](https://github.com/ApryseSDK/webviewer-samples/tree/main/webviewer-react) to get started quickly, or explore the interactive [Showcase demo](https://showcase.apryse.com/) to see WebViewer's full capabilities in action. ## Prerequisites This guide assumes basic familiarity with React development. Before you start: * Install [Node.js](https://nodejs.org/en/download) and npm. See the [Vite documentation](https://vite.dev/guide/#scaffolding-your-first-vite-project) for version details. * Install [Visual Studio Code](https://code.visualstudio.com/Download) or another code editor to develop and debug your code. * Get your Apryse trial key. {% @apryse-license-key/apryse-license-key platform="WEB\_VIEWER" variant="full" %} ## 1. Create a React project In this section, you’ll create a new React with Vite application using npm. This project provides the foundation for integrating Apryse WebViewer. If you already have a React app, skip this and continue to [Install WebViewer](#2-install-webviewer). 1. In your terminal, go to the directory where you want to create the project. 2. Create a new `webviewer-react` project using a minimal setup: {% tabs %} {% tab title="Shell" %} {% code lineNumbers="true" %} ```shell npx -y create-vite@latest webviewer-react --template react ``` {% endcode %} {% endtab %} {% endtabs %} {% hint style="info" %} **Info** Flags are used to skip prompts during project configuration. The Vite setup selects React as the framework and uses Javascript. Select different options if preferred. {% endhint %} 3. If prompted to install with npm and start now, select **No**. 4. Navigate to your new React project directory and install dependencies: {% tabs %} {% tab title="Shell" %} {% code lineNumbers="true" %} ```shell cd webviewer-react npm install ``` {% endcode %} {% endtab %} {% endtabs %} ## 2. Install WebViewer Next, install the Apryse WebViewer SDK using npm. This command adds the [WebViewer package](https://www.npmjs.com/package/@pdftron/webviewer) to your project, allowing you to integrate the PDF viewer and editor into your React application. After navigating to your `webviewer-react` project directory, run the following command to install WebViewer: {% tabs %} {% tab title="Shell" %} {% code lineNumbers="true" %} ```shell npm i @pdftron/webviewer ``` {% endcode %} {% endtab %} {% endtabs %} ## 3. Copy WebViewer assets WebViewer needs access to its static assets at runtime, including WebAssembly modules, HTML, and CSS files. In a React project, you must copy these assets into the `public` directory so they can be served correctly. For more, see [Copying WebViewer static assets](/web/get-started/copy-assets.md). 1. From your project root, create the `public/lib/webviewer` directory if it doesn't already exist: {% tabs %} {% tab title="Shell" %} {% code lineNumbers="true" %} ```shell npx --yes shx mkdir -p public/lib/webviewer ``` {% endcode %} {% endtab %} {% endtabs %} 2. Copy all WebViewer static assets from `node_modules/@pdftron/webviewer/public` into the new `public/lib/webviewer` directory: {% tabs %} {% tab title="Shell" %} {% code lineNumbers="true" %} ```shell npx --yes cpy-cli "node_modules/@pdftron/webviewer/public/**/*" public/lib/webviewer ``` {% endcode %} {% endtab %} {% endtabs %} Your project should now include a similar structure: {% code lineNumbers="true" %} ``` webviewer-react/ ├─ node_modules/ ├─ public/ │ ├─ lib/ │ │ └─ webviewer/ │ │ ├─ core/ │ │ └─ ui/ │ ├─ favicon.svg │ └─ ... ├─ src/ └── ... ``` {% endcode %} {% hint style="info" %} **Info** The `path` option used when initializing WebViewer must point to this directory (for example, `/lib/webviewer`). If the path is incorrect, WebViewer will fail to load. {% endhint %} ## 4. Create the PDF viewer Next, instantiate the Apryse WebViewer SDK and mount it in your React project. This involves creating a container for the viewer and initializing WebViewer so it loads correctly at runtime. 1. In Visual Studio Code, replace the contents of the `src/App.jsx` file with the following and save: 
import { useEffect, useRef } from 'react';
import WebViewer from '@pdftron/webviewer';

function App() {
  // Create reference to DOM element where WebViewer will mount
  const viewerRef = useRef(null);

  useEffect(() => {
    // Initialize WebViewer once when component mounts
    WebViewer(
      {
        // Path to copied WebViewer static assets
        path: '/lib/webviewer',
        // Replace with your Apryse license key
        licenseKey: 'visitor.claims.wvKey || "YOUR_LICENSE_KEY"',
        // Initial document to load when WebViewer starts (optional)
        initialDoc: 'https://pdftron.s3.amazonaws.com/downloads/pl/demo-annotated.pdf',
      },
      // Attach WebViewer to container element
      viewerRef.current
    ).then((instance) => {
      // Access WebViewer instance here if needed
      // const { UI, Core } = instance;
    });
  // Empty dependency array ensures this runs only once  
  }, []);
  return (
    // Container element for WebViewer
    <div
	    ref={viewerRef}
	    style={{ height: '100vh', width: '100%', margin: '0 auto' }}
	  />
  );
}

export default App;
{% hint style="info" %} **Info** If you're signed in with an Apryse account, your license key is automatically prepopulated in all code snippets. {% endhint %} 2. Replace the contents of the `src/main.jsx` file with the following and save: {% tabs %} {% tab title="JSX" %} {% code title="src/main.jsx" lineNumbers="true" %} ```jsx import { StrictMode } from 'react'; import { createRoot } from 'react-dom/client'; import App from './App.jsx'; createRoot(document.getElementById('root')).render( ); ``` {% endcode %} {% endtab %} {% endtabs %} {% hint style="info" %} **Info** In React 18 and later, `useEffect` may run twice in development when Strict Mode is enabled (which Vite uses by default). This can cause WebViewer to initialize twice and to display a duplicate instance. This behavior is expected and doesn't affect production builds. For this example, you can avoid duplicate initialization by removing the `StrictMode` wrapper in `src/main.jsx`. However, note that Strict Mode helps identify issues like memory leaks, so removing it isn't recommended for production or more complex applications. {% endhint %} ## 5. Verify your output You can now load and display a PDF document in the WebViewer UI. Run your React application to launch WebViewer and see the PDF in your browser. 1. From your project directory, run the following command to start the application: {% tabs %} {% tab title="Shell" %} {% code lineNumbers="true" %} ```shell npm run dev ``` {% endcode %} {% endtab %} {% endtabs %} A successful output looks similar to: {% tabs %} {% tab title="Shell" %} {% code lineNumbers="true" %} ```shell > webviewer-react@0.0.0 dev > vite VITE v8.0.16 ready in 1369 ms ➜ Local: http://localhost:5173/ ➜ Network: use --host to expose ➜ press h + enter to show help ``` {% endcode %} {% endtab %} {% endtabs %} 2. Open the localhost URL from your terminal to view the WebViewer UI and PDF document. ## Get started video In this 7-minute video, learn how to install and integrate the Apryse WebViewer SDK into a React project built with Vite. {% embed url="" %} Integrate the WebViewer SDK in a React with Vite application. {% endembed %} ## Next steps UsageGuidesSamplesAPI docs --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://docs.apryse.com/web/get-started/libraries-and-frameworks/react.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.