Awesome Nutrient

This repository contains examples built with Nutrient. These examples are not officially supported, which means they may stop working and not be fixed, but they exist to serve for inspiration. Read the disclaimer or reach out if you have questions.

Web

A wide variety of examples showcasing what Nutrient Web SDK can do can be found in the Example Catalog. You can also try them online.

• Electronic signatures — Use our API to add electronic signature images to PDFs.
• Watermarks — Add custom content (like images, text, and logos) as watermarks to your PDF pages.
• Image annotations — Annotate images with Nutrient Web SDK.
• Custom UI for annotations — Create a fully customized UI for working with annotations.
• Custom annotation permissions — Define custom permissions for annotation types.
• Custom annotation tools — Add your own tools or actions when an annotation is selected.
• Custom toolbar tools — Add custom tools to the PDF toolbar.
• PDF page manipulation — Add, remove, reorder, or rotate pages in a PDF.
• Advanced PDF search — Modify PDF search behavior.
• Custom overlays — Extend PDFs by adding your own elements to pages.
• Selective area revealing — Allow users to hide/reveal areas on a PDF page.
• HTML-based annotation customization — Enhance or replace existing PDF annotations using custom HTML.
• Dark mode — Switch to dark mode programmatically.
• Custom views and drag and drop — Add custom views for dragging and dropping image elements.
• Document editor customization — Customize the document editor toolbar and footer items.
• Page flip effect — Create a magazine-like browsing experience.
• Permissions enforcement — Set permissions based on JSON Web Token (JWT) parameters.
• Electronic signatures persistence — Keep electronic signatures across page refreshes.

Web SDK Examples

• Web Examples
• React
• Angular
• Next
• Nuxt

Annotations

• Watermark from text annotation

  • Dynamically add watermark text annotations to PDF pages before flattening them into a document.

• Flatten annotation on annotation create

• Remove inline text selection Toolbar on text select

• Straighten freeform highlight

  • Convert freeform ink annotations into highlight annotations.

• Add ink stroke color preset to custom buttons

  • Customize the toolbar to add two custom ink annotation buttons — one for red ink and one for blue ink — alongside the default ink annotation tool.

• Custom outlines for shape annotations

  • Customize shape annotations by adding an outline.

• Customize annotation creators

  • Create and customize stamp annotations with multiple creators.

• Prevent dragging annotations but keep them selectable

• Prevent ink signature from drag and resize while allowing its deletion

• Programmatically create a comment thread

  • Programmatically add a comment marker annotation and an associated comment while setting the annotation creator's name.

• Open URL from image annotation

• Display highlighted text in annotation sidebar

  • Customize the annotation sidebar to display highlighted text and allow annotation editing (except for signatures).

• Hide link annotations tooltip

  • Hide the popover element when a link annotation is selected

• Handle interactions with notes attached to annotations

• Use custom renderers to display annotation information on hover

  • Enhance annotations by adding hover-based tooltips while preventing edits.

• Create highlight annotations programmatically from search

  • Search for specific text values in a document, create highlight annotations for the found text, and apply those annotations to the document.

• Use custom actions with the embedded PDF widget button

  • Create a button form field, add an event listener to handle button clicks that trigger a file input for uploading images, and attach the selected image as an annotation in the document.

• Prevent showing note annotation content on hover

  • Add an event listener to hide the note annotation popover when the mouse is over the note icon.

• Link comments with annotations

  • When an annotation is selected, a tooltip appears, allowing users to create a linked comment marker annotation.

• Create annotations from the clipboard

  • Enable pasting content from the clipboard onto a PDF as a text or image annotation.

• Navigate annotations with a custom toolbar button

  • Get all annotation coordinates and seamlessly navigate with a custom “Next Annotation” button that highlights and jumps to each annotation.

• Snip and save annotations as JPEG images

  • Snip the area covered by an annotation and save it as a JPEG image.

• Add a timestamp as a subtitle to a custom stamp

  • Add a custom stamp annotation template with dynamic subtitle text (including the current date and time), and set up the UI to update the subtitle each time the stamps list is opened.

• Add PDF file as custom stamp

• Add and count a checkmark annotation in the toolbar

  • Use a custom toolbar button for toggling stamp creation mode, allowing users to add "Accepted" stamp annotations on page press and track the total count of such annotations across a document.

Redaction

• Redact keywords programmatically

  • Load a PDF, search for keywords, create redaction annotations over the found text, and apply the redactions to permanently remove the text.

• Apply redactions to text with an overlay

  • Load a PDF, retrieve all text lines from every page, create redaction annotations over the detected text using an overlay, and apply the redactions to the document.

• Approve or reject redactions before applying

• Approve or reject redactions before applying - Playground link

  • Manage redaction annotations from an annotation tooltip with two options that allow you to apply or reject redactions one by one.

• Add a custom tooltip to a redaction annotation

  • Add redaction tools to the toolbar and modify the tooltip behavior for redaction annotations.

Comments

• Set annotation creator name

  • Set an annotation creator’s name, ensuring any annotations — including comments — made by that user are attributed to them.

• Link comments with annotations

• Add custom buttons for customizing comments

  • Customize the comments popover by adding custom actions, like approve and reject, allowing users to manage comments efficiently.

Signing

• Disable Editing a Signature After Creation
• Apply Signature OnClick
• Move to the Next Signing Field With the Sign Here Widget Automatically
• Sign Here Widget With More Functionality
• Change Default Size for Signatures
• Get the Last Signed Signature Field
• A Complete Frontend Signing POC in NextJS
• Lightweight Multi-Party Signing Example in Vanilla JS
• Smoothly Scroll Into The Next Signature Field

Forms

• Add Custom Button To Form Field Configuration
• Add Custom Form Field Buttons
• Add Name on Top of Signature Field/Widget
• Add Custom Database Form Fields Information While Creating Form Fields With UI
• Iterate Over Form Fields and Widgets and Output Their Properties
• Set Radio Button & Checkbox Value To Default YES
• Highlight All Required Fields

Form Creator

• Prevent Creating Widgets Outside of Page Bounds

Toolbars and Menus

• Add Custom Sidebar Item in Menu
• Add Custom Sidebar item with selected text
• Add Read Checkmark to Thumbnails
• Custom Button on Redact Annotation Toolbar
• Add a Link, Highlight, Underline Annotation From the Inline Text Context Menu
• Rotate PDF Pages With Custom Toolbar Buttons
• Show Redaction Annotations in the Annotation Sidebar
  • By default some annotation types are hidden in the annotation sidebar by design. This example showcases the API used to enable showing those types if needed.

Text Comparison

• Custom Text Comparison Sample
• Custom Text Comparison Demo)

Viewer

• Zoom-In/Zoom-Out With Scroll
• Create a blank document of size A3
• Load document from S3 bucket as URL and allow Linearized Document
• Using custom button on toolbar add blank page to the begining of the document
• Export Selected Pages in Document Editor
• Regular Expression (Regex) Search
• Print Single Page.
• Restrict Zoom Level Both Ways
• Extract Text From Cropped PDF Pages
• Execute Operations in Headless Mode Before Loading the Document in the Viewer
• Save Selected Page From Document Editor
• Convert From Text to Speech
• Convert From Speech to text
• Desanitization of HTML Entities & Special Characters in Note Annotations
• Detect when viewer UI is loaded

.NET Coming Soon

Design System

• Baseline UI
  • A set of customisable and accessible React components.
• Add custom button to main toolbar
  • This examples adds a custom button to the main toolbar.
• Change label of thumbnails in Thumbnails Sidebar to a string
  • This example changes the thumbnails label in the thumbnail sidebar to a custom strings.
• Change cancel button in Document Editor Modal variant
  • This examples makes the cancel button in the the Document Editor Dialog red.
• Add a custom button in the Create Signature Modal that changes a custom state
  • This examples displays and changes a custom state in the Create Signature Modal

AI

• Document Assistant for PSPDFKit
  • AI Document Assistant for PSPDFKit Demo showcases how to interact with PDFs using natural language commands powered by AI, integrated with Nutrient Web SDK.

Document Authoring

• Document Generator VanillaJS
  • A fully functional step-by-step document generator that brings the user from a template to a PDF document, where they get to make modifications on every step of the way. Demonstrates the combined capabilities of Nutrient's Document Authoring and Web SDKs.

iOS

• iOS Catalog
  • A wide variety of examples what Nutrient iOS SDK can do. Clone it and play with it.

Android

• Android Catalog
  • A wide variety of examples what Nutrient Android SDK can do. Clone it and play with it.

Windows

• Using Nutrient Web SDK in WinUI3 app
  • Learn how to use web SDK in WinUI3 app or any app that supports WebView2.

Cross-Platform

• React Native Catalog
  • A diverse range of examples showcasing what Nutrient React Native SDK is capable of. Clone the repository and explore its features firsthand.
• MAUI Catalog
  • A diverse range of examples showcasing what Nutrient MAUI SDK is capable of. Clone the repository and explore its features.
• Flutter Sample
  • Discover a practical example showcasing the power of Nutrient Flutter SDK.
• .NET for Android Sample
  • Learn how to use C# Bindings for Nutrient Android SDK.
• .NET for iOS Sample
  • Learn how to use C# Bindings for Nutrient iOS SDK.