@veltdev/nutrient-velt-comments

Add Google Docs-style collaborative comments to your Nutrient Web SDK (PSPDFKit) PDF viewer using the Velt Collaboration SDK.

Comment highlights are rendered as view-only overlay elements (<velt-comment-text>) positioned over the commented text via a Nutrient CustomOverlayItem — your document is never modified. Each comment is anchored by a durable { text, pageNumber, occurrence } and re-resolved from the page text on every render, so highlights stay locked through scroll, zoom, and page changes.

Install

npm i @veltdev/nutrient-velt-comments
npm i @nutrient-sdk/viewer   # peer dependency (types only; the SDK is loaded at runtime)

Usage

import {
  NutrientVeltComments,
  addComment,
  renderComments,
} from '@veltdev/nutrient-velt-comments';

// after NutrientViewer.load(...) resolves:
const attached = NutrientVeltComments.configure({ editorId: 'my-doc' }).attach(instance);

// create a comment for the current text selection:
await addComment({ instance });

// render existing comments (driven by Velt's useCommentAnnotations):
renderComments({ instance, commentAnnotations });

// teardown:
attached.detach();

API

| Export | Purpose | |---|---| | NutrientVeltComments.configure(config).attach(instance) | Wire the extension to a viewer instance; returns { detach() }. | | addComment({ instance }) | Create a comment on the current text selection. | | renderComments({ instance, commentAnnotations }) | Render/refresh comment highlights from Velt. |

Config (NutrientVeltCommentsConfig): editorId? (default 'nutrient'), scrollToSelectedComment? (default true).

Source, tests, and demo: snippyly/nutrient-velt-comments.

About Velt SDK

With Velt SDK you can add powerful collaboration features to your product extremely fast — fully customizable UI on a fully-managed realtime backend. Features include Comments (Figma / Google Docs-style), Recording (Loom-style), Huddle (Slack-style), in-app & off-app notifications, @mentions, Presence, Cursors, Live Selection, and more.

Documentation

• Read the documentation for guides and API references.

Use cases

• Explore use cases to see what collaboration could look like in your product.

Releases

• See the latest changes.

Security

• Velt is SOC2 Type 2 and HIPAA compliant. Learn more.

Community

• X: updates, announcements, and general Velt tips.
• Discord: ask questions and share tips.

© Velt — Proprietary.