Scribd
Upload
32 views

NUTRIENT DOCS

This document provides a guide for integrating the Nutrient Web SDK into a React project, enabling the display of PDF documents in the Nutrient UI. It outlines the advantages of using the Web SDK, including quick deployment and enhanced privacy, and details the steps to add the PSPDFKit dependency, display a PDF, and set up the application. Additionally, it offers links to further resources for troubleshooting and building progressive web apps.

Uploaded by

Aoden Teo Masa Toshi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
32 views

NUTRIENT DOCS

This document provides a guide for integrating the Nutrient Web SDK into a React project, enabling the display of PDF documents in the Nutrient UI. It outlines the advantages of using the Web SDK, including quick deployment and enhanced privacy, and details the steps to add the PSPDFKit dependency, display a PDF, and set up the application. Additionally, it offers links to further resources for troubleshooting and building progressive web apps.

Uploaded by

Aoden Teo Masa Toshi
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

21/02/2025, 23:26 Getting started on Web | Nutrient

SDK Low-Code Workflow DWS API

DOCS

Web

Get Started

GETTING STARTED WEB

Getting started on Web

REACT

EXISTING PROJECT

Integrate into a React Project


This guide will walk you through the steps necessary to integrate Nutrient Web SDK into your project. By
the end, you’ll be able to present a PDF document in the Nutrient UI.

Select your preferred product:

Web SDK

When only using Web SDK, our JavaScript library renders and edits documents directly in the browser. It’s
powered by WebAssembly technology, and it doesn’t require a server, plugins, or internet access, making it
secure, fast, and suitable for offline use.

Web SDK offers several advantages: ASK AI

https://www.nutrient.io/getting-started/web/?frontend=react&project=existing-project 1/5
21/02/2025, 23:26 Getting started on Web | Nutrient

Quick deployment — No server setup or maintenance required, enabling rapid implementation.

Reduced infrastructure costs — Rendering and processing are handled on the client-side, lowering
server expenses.

Privacy by design — Documents remain on the client’s machine, avoiding network transfers and
minimizing data exposure risks.

1 Adding PSPDFKit to Your Project


1 Add the PSPDFKit dependency:

YARN NPM

1 yarn add pspdfkit

2 Copy the PSPDFKit for Web library assets to the public directory:

cp -R ./node_modules/pspdfkit/dist/pspdfkit-lib public/pspdfkit-lib

3 Make sure your public directory contains a pspdfkit-lib directory with the PSPDFKit
library assets.

4 Make sure your server has the Content-Type: application/wasm MIME typeset. Read more
about this in the troubleshooting section.

2 Displaying a PDF
1 Rename the PDF document you want to display in your application to document.pdf , and place it
in the public directory. You can use this demo document as an example.

2 In the src/components/ folder, create the PdfViewerComponent.js file with the following
content. This adds a component wrapper for the PSPDFKit library:

https://www.nutrient.io/getting-started/web/?frontend=react&project=existing-project 2/5
21/02/2025, 23:26 Getting started on Web | Nutrient

1 import { useEffect, useRef } from "react";


2
3 export default function PdfViewerComponent(props) {
4 const containerRef = useRef(null);
5
6 useEffect(() => {
7 const container = containerRef.current; // This `useRef` instance will
8
9 let PSPDFKit, instance;
10
11 (async function () {
12 PSPDFKit = await import("pspdfkit")
13
14 PSPDFKit.unload(container) // Ensure that there's only one PSPDFKit in
15
16 instance = await PSPDFKit.load({
17 // Container where PSPDFKit should be mounted.
18 container,
19 // The document to open.
20 document: props.document,
21 // Use the public directory URL as a base URL. PSPDFKit will downl
22 baseUrl: `${window.location.protocol}//${window.location.host}/${p
23 });
24 })();
25
26 return () => PSPDFKit && PSPDFKit.unload(container)
27 }, []);
28
29 // This div element will render the document to the DOM.
30 return <div ref={containerRef} style={{ width: "100%", height: "100vh" }
31 }

The PUBLIC_URL variable is used to reference assets in your public/ folder. Your project might not
have the process.env.PUBLIC_URL variable set. You can set it before building the project:

Mac and Linux — PUBLIC_URL=https://localhost:3000 npm run build

Windows — set PUBLIC_URL=https://localhost:3000&&npm run build

3 In your app, add the following below the lines beginning with import . This includes the newly
created component in your app:

1 import PdfViewerComponent from './components/PdfViewerComponent';


2
3 function DocumentViewerComponent() {
4 return (
5 <div className="PDF-viewer">
6 <PdfViewerComponent
https://www.nutrient.io/getting-started/web/?frontend=react&project=existing-project 3/5
21/02/2025, 23:26 Getting started on Web | Nutrient
7 document={"document.pdf"}
8 />
9 </div>
10 );
11 }

4 Add the following to the rendering function in your app:

DocumentViewerComponent()

5 Start the app and run it in your default browser:

YARN NPM

1 yarn start

Next Steps
Check out the full React example.

Explore real-world applications — See how others are using our tools! Discover common use cases
and get inspiration for your own projects. View the example project.

Troubleshooting made easy — Encountered a bump in the road? We’ve got you covered. Find
solutions in the troubleshooting guide.

Build a supercharged PWA — Want to create a progressive web app (PWA) with our SDK? Our
comprehensive PWA guide provides step-by-step instructions to get you started.

Was this helpful?


https://www.nutrient.io/getting-started/web/?frontend=react&project=existing-project 4/5
21/02/2025, 23:26 Getting started on Web | Nutrient

YES NO

Questions? Contact us

https://www.nutrient.io/getting-started/web/?frontend=react&project=existing-project 5/5

You might also like