--- title: This PDF-Viewer For React / Next.js Can Do EVERYTHING... description: A walkthrough of integrating the Apryse WebViewer SDK into a Next.js app to handle PDF document workflows. Covers installation, copying static assets to the... canonical: https://daily.dev/posts/this-pdf-viewer-for-react-next-js-can-do-everything-edit-redact-annotate--xw5cn0m2q twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: This PDF-Viewer For React / Next.js Can Do EVERYTHING (Edit, Redact, Annotate)! | daily.dev og:description: A walkthrough of integrating the Apryse WebViewer SDK into a Next.js app to handle PDF document workflows. Covers installation, copying static assets to the... og:url: https://daily.dev/posts/this-pdf-viewer-for-react-next-js-can-do-everything-edit-redact-annotate--xw5cn0m2q og:image: https://api.daily.dev/og/posts/Xw5cn0M2q.png og:image:alt: This PDF-Viewer For React / Next.js Can Do EVERYTHING (Edit, Redact, Annotate)! og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # This PDF-Viewer For React / Next.js Can Do EVERYTHING (Edit, Redact, Annotate)! **[ByteGrad](https://daily.dev/sources/bytegrad)** · 21 min read · 25 upvotes · 1 comments ## Summary A walkthrough of integrating the Apryse WebViewer SDK into a Next.js app to handle PDF document workflows. Covers installation, copying static assets to the public folder, initializing the viewer in a useEffect for client-side rendering, and customizing the component via the instance API. Demonstrates features including annotation, redaction, text editing, fill-and-sign, search, and programmatic document switching. Also shows how to build external UI controls that interact with the viewer instance, and how to configure options like full API mode, feature flags, themes, and environment variables for the license key. The SDK supports 100+ file formats and handles many edge cases out of the box. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do you set up the Apryse WebViewer SDK in a Next.js app? Install the webviewer package via npm, then copy the WebViewer static assets from node_modules into a public/lib/webviewer directory using the command provided in the documentation. Create a client component (e.g. ApryseWebViewer.tsx) that imports and initializes WebViewer inside a useEffect hook, since it must run client-side only, pointing it to the asset path, a license key, and an initial document via a useRef-mounted element. _daily.dev surfaces practical integration walkthroughs for developers wiring PDF tooling into Next.js apps._ ### Can users redact sensitive information from a PDF using the Apryse WebViewer SDK? Yes, redaction is a built-in feature: a user draws a rectangle around sensitive text such as a name or date, which marks it for redaction as a review step, and then applying it permanently removes that information when the file is exported as a new PDF. This is enabled through a redaction feature setting during WebViewer initialization. _Developers handling compliance-heavy document workflows track redaction capabilities like this on daily.dev._ ### What is the difference between the standard API and full API options in Apryse WebViewer? The standard API covers basic PDF viewing and simple editing, while the full API unlocks a broader set of advanced features such as enabling annotations, downloading edited files, or exporting reviewed documents. Choosing full API is necessary when a document workflow needs more than basic display and light editing. _Teams evaluating document SDKs weigh options like this before committing on daily.dev._ --- Tags: [#react](https://daily.dev/tags/react), [#nextjs](https://daily.dev/tags/nextjs) [View this post on daily.dev](https://daily.dev/posts/this-pdf-viewer-for-react-next-js-can-do-everything-edit-redact-annotate--xw5cn0m2q) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"This PDF-Viewer For React / Next.js Can Do EVERYTHING (Edit, Redact, Annotate)!","url":"https://daily.dev/posts/this-pdf-viewer-for-react-next-js-can-do-everything-edit-redact-annotate--xw5cn0m2q","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/this-pdf-viewer-for-react-next-js-can-do-everything-edit-redact-annotate--xw5cn0m2q"},"datePublished":"2026-07-17T12:02:05.986Z","dateModified":"2026-09-13T21:41:44.161Z","description":"A walkthrough of integrating the Apryse WebViewer SDK into a Next.js app to handle PDF document workflows. Covers installation, copying static assets to the...","image":"https://i.ytimg.com/vi/QL4JVxzUgPQ/sddefault.jpg","thumbnailUrl":"https://i.ytimg.com/vi/QL4JVxzUgPQ/sddefault.jpg","isAccessibleForFree":true,"articleSection":"ByteGrad","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"ByteGrad","logo":"https://media.daily.dev/image/upload/s--UnJ6vKLR--/f_auto/v1732552127/logos/bytegrad","url":"https://daily.dev/sources/bytegrad"},"commentCount":1,"discussionUrl":"https://daily.dev/posts/this-pdf-viewer-for-react-next-js-can-do-everything-edit-redact-annotate--xw5cn0m2q","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":25},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":1}],"keywords":"react,nextjs","timeRequired":"PT21M","video":{"@type":"VideoObject","name":"This PDF-Viewer For React / Next.js Can Do EVERYTHING (Edit, Redact, Annotate)!","description":"A walkthrough of integrating the Apryse WebViewer SDK into a Next.js app to handle PDF document workflows. Covers installation, copying static assets to the...","thumbnailUrl":"https://i.ytimg.com/vi/QL4JVxzUgPQ/sddefault.jpg","uploadDate":"2026-07-17T12:02:05.986Z","duration":"PT21M","url":"https://api.daily.dev/r/Xw5cn0M2q","embedUrl":"https://www.youtube.com/embed/QL4JVxzUgPQ"}} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"ByteGrad","item":"https://daily.dev/sources/bytegrad"},{"@type":"ListItem","position":3,"name":"This PDF-Viewer For React / Next.js Can Do EVERYTHING (Edit, Redact, Annotate)!"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/this-pdf-viewer-for-react-next-js-can-do-everything-edit-redact-annotate--xw5cn0m2q#faq","mainEntity":[{"@type":"Question","name":"How do you set up the Apryse WebViewer SDK in a Next.js app?","acceptedAnswer":{"@type":"Answer","text":"Install the webviewer package via npm, then copy the WebViewer static assets from node_modules into a public/lib/webviewer directory using the command provided in the documentation. Create a client component (e.g. ApryseWebViewer.tsx) that imports and initializes WebViewer inside a useEffect hook, since it must run client-side only, pointing it to the asset path, a license key, and an initial document via a useRef-mounted element. daily.dev surfaces practical integration walkthroughs for developers wiring PDF tooling into Next.js apps."}},{"@type":"Question","name":"Can users redact sensitive information from a PDF using the Apryse WebViewer SDK?","acceptedAnswer":{"@type":"Answer","text":"Yes, redaction is a built-in feature: a user draws a rectangle around sensitive text such as a name or date, which marks it for redaction as a review step, and then applying it permanently removes that information when the file is exported as a new PDF. This is enabled through a redaction feature setting during WebViewer initialization. Developers handling compliance-heavy document workflows track redaction capabilities like this on daily.dev."}},{"@type":"Question","name":"What is the difference between the standard API and full API options in Apryse WebViewer?","acceptedAnswer":{"@type":"Answer","text":"The standard API covers basic PDF viewing and simple editing, while the full API unlocks a broader set of advanced features such as enabling annotations, downloading edited files, or exporting reviewed documents. Choosing full API is necessary when a document workflow needs more than basic display and light editing. Teams evaluating document SDKs weigh options like this before committing on daily.dev."}}]} ```