Velt Nutrient Web SDK CRDT React Library

With Velt Nutrient Web SDK CRDT React Library, you can add powerful multiplayer editing and state synchronization features to any React application using Nutrient Web SDK.

The library provides React-native realtime primitives:

• useCollaboration hook for managing shared state and the base CollaborationManager
• NutrientCrdtEditor drop-in component that owns the NutrientViewer.load()/unload() lifecycle
• NutrientCrdtProvider + useCollaborationContext for sharing one collaboration value across a component tree
• Fully-managed on a scalable realtime backend
• Powered by Yjs for industry-standard conflict resolution

Features include:

• Multiplayer Annotation Editing — highlights, comments, and form-field values synchronized in real time as Nutrient Instant JSON
• Collaboration with presence and remote selection overlays
• Conflict Resolution ensuring document consistency across all clients
• Offline Support with automatic synchronization upon reconnection
• Versions — save, list, and restore named document versions
• React Hooks for seamless integration with React components
• ... and so much more

Installation

npm install @veltdev/nutrient-crdt-react @veltdev/nutrient-crdt @nutrient-sdk/viewer @veltdev/react @veltdev/types

Public API

| Export | Kind | Purpose | |--------|------|---------| | useCollaboration(config) | hook | Creates and tracks a base CollaborationManager; returns status/synced/versions/selections state plus delegated helpers (attachInstance, applyInstantJson, addHighlight, addComment, setFormFieldValue, saveVersion, restoreVersion, forceReset, and more). | | NutrientCrdtEditor | component | Drop-in viewer host: loads (or accepts) a Nutrient viewer instance, wires it to the hook, and renders a render-prop with the collaboration value. | | NutrientCrdtProvider / CollaborationProvider | component | Provides one useCollaboration value through React context. | | useCollaborationContext / CollaborationContext | hook / context | Reads the provider value (null outside a provider). | | CollaborationManager, createCollaboration | re-export | The base package's manager class and factory. | | Content helpers | re-export | INSTANT_JSON_FORMAT, createDocumentState, createHighlightAnnotation, createCommentPayload, createSelectionState, addHighlightToInstantJson, addCommentToInstantJson, setFormFieldValue, mergeInstantJson, diffInstantJson, getInstantJsonRecordId, cloneJson, stableStringify, stripPdfId, hasInstantJson, isDocumentState, normalizeRects. | | Types | re-export | UseCollaborationConfig, UseCollaborationReturn, NutrientCrdtEditorProps, NutrientCrdtProviderProps, NutrientViewerModule, plus the base type set (CollaborationConfig, InstantJson, InstantJsonDiff, NutrientSdk, NutrientDocumentState, RemoteSelection, SyncStatus, Version, and more). |

Documentation

• Read the documentation for setup guides and API references.

Use cases

The Nutrient Web SDK CRDT library is used to power:

• Collaborative PDF annotation and review tools
• Real-time document editing
• Shared workspaces
• Any shared, mutable environment

Resources

• Explore multiplayer editing to see features like collaborative PDF annotation, text editing, and shared documents.
• Sample Apps: Check out example implementations for various use cases.

Releases

• See the latest changes.

Security

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

Community

• X: To receive updates, announcements, and general Velt tips.