Comments
Threads
addCommentAnnotation()
Add a new comment annotation.- Params: AddCommentAnnotationRequest
- Returns: AddCommentAnnotationEvent
- React Hook:
useAddCommentAnnotation() - Full Documentation →
addCommentOnSelectedText()
Add a comment on selected text.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
addCommentOnElement()
Add a comment on a specific element.- Params:
{ targetElement: object, commentData: array, status?: string } - Returns:
void - React Hook:
n/a - Full Documentation →
addManualComment()
Add a comment with custom positioning.- Params:
ManualCommentAnnotationConfig - Returns:
void - React Hook:
n/a - Full Documentation →
deleteCommentAnnotation()
Delete a comment annotation.- Params: DeleteCommentAnnotationRequest
- Returns: DeleteCommentAnnotationEvent
- React Hook:
useDeleteCommentAnnotation() - Full Documentation →
deleteSelectedComment()
Delete the currently selected comment.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
getCommentAnnotationsCount()
Get the total and unread comment annotations count for specified documents.- Params: CommentRequestQuery (optional)
- Returns:
Observable<GetCommentAnnotationsCountResponse> - React Hook:
useCommentAnnotationsCount() - Full Documentation →
getUnreadCommentAnnotationCountByLocationId()
Get count of unread comment annotations by location ID.- Params:
locationId: string - Returns:
Observable<UnreadCommentsCount | null> - React Hook:
useUnreadCommentAnnotationCountByLocationId() - Full Documentation →
getCommentAnnotations()
Get all the comment annotations for all the specified documents.- Params: CommentRequestQuery (optional)
- Returns:
Observable<GetCommentAnnotationsResponse> - React Hook:
useGetCommentAnnotations() - Full Documentation →
getSelectedComments()
Get currently selected comment annotations.- Params: none
- Returns:
Observable<CommentAnnotation[]> - React Hook:
n/a - Full Documentation →
getCommentAnnotationById()
Get a specific comment annotation by ID.- Params:
{ annotationId: string, documentId?: string } - Returns:
Observable<CommentAnnotation> - React Hook:
useCommentAnnotationById() - Full Documentation →
getElementRefByAnnotationId()
Get the DOM element reference for a comment annotation.- Params:
annotationId: string - Returns:
string - React Hook:
n/a - Full Documentation →
Slate
withVeltComments()
Higher-order function that enhances a Slate editor with Velt comments capabilities.- Params:
editor: Editoroptions?: VeltCommentsEditorOptions
- Returns:
VeltCommentsEditor - React Hook:
n/a - Full Documentation →
addComment()
Creates a comment annotation for the currently selected text in the editor.- Signature:
async (request:AddCommentRequest) => Promise<void> - Params:
request:AddCommentRequest - Returns:
Promise<void> - React Hook:
n/a - Full Documentation →
renderComments()
Renders and highlights comment annotations in the editor.- Signature:
(request:RenderCommentsRequest) => void - Params:
request:RenderCommentsRequest - Returns:
void - React Hook:
n/a - Full Documentation →
SlateVeltComment
React component that renders a Velt comment text element with annotation ID.- Params:
props: RenderElementPropselement:VeltCommentsElement
- Returns:
N/A - React Hook:
n/a - Full Documentation →
Tiptap
TiptapVeltComments.configure()
A custom Tiptap extension for Velt comments.- Params:
options?:TiptapVeltCommentsOptions - Returns:
TiptapVeltComments - React Hook:
n/a - Full Documentation →
addComment()
Creates a comment annotation for the currently selected text in the editor.- Params:
request:AddCommentRequesteditor: EditoreditorId?: stringcontext?: unknown
- Returns:
Promise<void> - React Hook:
n/a - Full Documentation →
renderComments()
Renders and highlights comment annotations in the editor.- Params:
request:RenderCommentsRequesteditor: EditoreditorId?: stringcommentAnnotations?:CommentAnnotation[]
- Returns:
void - React Hook:
n/a - Full Documentation →
Lexical
addComment()
Creates a comment annotation for the currently selected text in the editor.- Signature:
addComment: async (request:AddCommentRequest)=> Promise<void> - Params:
AddCommentRequest - Returns:
Promise<void> - React Hook:
n/a - Full Documentation →
renderComments()
Renders and highlights comment annotations in the editor.- Signature:
renderComments: (request:RenderCommentsRequest) => void - Params:
RenderCommentsRequest - Returns:
void - React Hook:
n/a - Full Documentation →
exportJSONWithoutComments()
Export the editor state JSON while stripping comment nodes and normalizing adjacent text nodes.- Signature:
exportJSONWithoutComments(editor: LexicalEditor): SerializedEditorState<SerializedLexicalNode> - Params:
editor:LexicalEditor - Returns:
SerializedEditorState<SerializedLexicalNode> - React Hook:
n/a - Full Documentation →
Messages
addComment()
Add a comment to a specific comment annotation.- Params: AddCommentRequest
- Returns: AddCommentEvent
- React Hook:
useAddComment() - Full Documentation →
updateComment()
Update a comment in a specific comment annotation.- Params: UpdateCommentRequest
- Returns: UpdateCommentEvent
- React Hook:
useUpdateComment() - Full Documentation →
deleteComment()
Delete a comment from a specific comment annotation.- Params: DeleteCommentRequest
- Returns: DeleteCommentEvent
- React Hook:
useDeleteComment() - Full Documentation →
getComment()
Get comments from a specific comment annotation.- Params: GetCommentRequest
- Returns: Comment[]
- React Hook:
useGetComment() - Full Documentation →
getUnreadCommentCountOnCurrentDocument()
Get the number of unread comments on the current document.- Params: none
- Returns:
Observable<UnreadCommentsCount | null> - React Hook:
useUnreadCommentCountOnCurrentDocument() - Full Documentation →
getUnreadCommentCountByLocationId()
Get the number of unread comments by location ID.- Params:
locationId: string - Returns:
Observable<UnreadCommentsCount | null> - React Hook:
useUnreadCommentCountByLocationId() - Full Documentation →
getUnreadCommentCountByAnnotationId()
Get the number of unread comments by annotation ID.- Params:
annotationId: string - Returns:
Observable<number> - React Hook:
useUnreadCommentCountByAnnotationId() - Full Documentation →
markAsRead()
Mark a comment annotation as read for the current user.- Params:
annotationId: string - Returns:
Promise<void> - React Hook:
useCommentUtils() - Full Documentation →
markAsUnread()
Mark a comment annotation as unread for the current user.- Params:
annotationId: string - Returns:
Promise<void> - React Hook:
useCommentUtils() - Full Documentation →
@Mentions
assignUser()
Assign a user to a comment annotation.- Params: AssignUserRequest
- Returns: AssignUserEvent
- React Hook:
useAssignUser() - Full Documentation →
disableCustomAutocompleteSearch()
Disable custom autocomplete search for contact list.- Params:
none - Returns:
void - React Hook:
useContactUtils()oruseCommentUtils() - Full Documentation →
enableAtHere()
Enable or disable @here mentions.- Params: none
- Returns:
void - React Hook:
useContactUtils() - Full Documentation →
enableUserMentions()
Enable or disable user @mentions.- Params: none
- Returns:
void - React Hook:
useContactUtils() - Full Documentation →
enableCustomAutocompleteSearch()
Enable custom autocomplete search for contact list.- Params:
none - Returns:
void - React Hook:
useContactUtils()oruseCommentUtils() - Full Documentation →
getContactList()
Subscribe to the list of users added to organization, folder, document, user groups or the ones overwritten using theupdateContactList API.
- Params: none
- Returns:
Observable<GetContactListResponse> - React Hook:
useContactList() - Full Documentation →
onContactSelected()
Listen for when a contact is selected from the dropdown.- Params: none
- Returns:
Observable<UserContactSelectedPayload> - React Hook:
useContactSelected() - Full Documentation →
setAtHereLabel()
Customize the @here label text.- Params:
label: string - Returns:
void - React Hook:
useContactUtils() - Full Documentation →
setAtHereDescription()
Customize the @here description text.- Params:
description: string - Returns:
void - React Hook:
useContactUtils() - Full Documentation →
subscribeCommentAnnotation()
Subscribe to a comment annotation.- Params: SubscribeCommentAnnotationRequest
- Returns: SubscribeCommentAnnotationEvent
- React Hook:
useSubscribeCommentAnnotation() - Full Documentation →
unsubscribeCommentAnnotation()
Unsubscribe from a comment annotation.- Params: UnsubscribeCommentAnnotationRequest
- Returns: UnsubscribeCommentAnnotationEvent
- React Hook:
useUnsubscribeCommentAnnotation() - Full Documentation →
updateContactList()
Update the contact list for the current user session.- Params:
contacts: Array<{userId: string, name: string, email: string}>, options?: {merge: boolean} - Returns:
void - React Hook:
useContactUtils() - Full Documentation →
updateContactListScopeForOrganizationUsers()
Restrict which contacts are shown in the dropdown for organization users.- Params:
scopes: Array<'all' | 'organization' | 'organizationUserGroup' | 'document'> - Returns:
void - React Hook:
n/a - Full Documentation →
Metadata
addContext()
Add custom metadata to a comment annotation.- Params:
{ [key: string]: any } - Returns:
void - React Hook:
useCommentEventCallback('addCommentAnnotation') - Full Documentation →
updateContext()
Update custom metadata on a comment annotation.- Params:
annotationId: string, context: { [key: string]: any }, config?: { merge: boolean } - Returns:
void - React Hook:
n/a - Full Documentation →
Custom Lists
addCustomListDataOnAnnotation()
Add a custom dropdown list at the Comment Annotation level.- Params:
{ type: 'multi' | 'single', placeholder: string, data: Array<{ id: string, label: string }> } - Returns:
void - React Hook:
useCommentUtils() - Full Documentation →
addCustomListDataOnComment()
Add a custom dropdown list that appears when a hotkey is pressed in the comment composer.- Params:
{ hotkey: string, type: 'custom', data: Array<AutocompleteItem> } - Returns:
void - React Hook:
useCommentUtils() - Full Documentation →
onAutocompleteChipClick()
Listen for clicks on autocomplete chips in comments.- Params: none
- Returns:
Observable<AutocompleteItem> - React Hook:
useAutocompleteChipClick() - Full Documentation →
enableCustomAutocompleteSearch()
Enable custom autocomplete search for custom list.- Params:
none - Returns:
void - React Hook:
useCommentUtils() - Full Documentation →
disableCustomAutocompleteSearch()
Disable custom autocomplete search for custom list.- Params:
none - Returns:
void - React Hook:
useCommentUtils() - Full Documentation →
Event Subscription
on()
Subscribe to comment events.- Params:
CommentEventType. Here is the list of event types you can subscribe to. - Returns:
Observable<CommentEventTypesMap[T]>. Here is the list of events object types you can expect to receive. - React Hook:
useCommentEventCallback(CommentEventType) - Full Documentation →
Attachments
enableAttachments()
Enable file attachments in comments.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
addAttachment()
Add an attachment to a specific comment annotation.- Params: AddAttachmentRequest
- Returns:
Promise<AddAttachmentResponse[]> - React Hook:
useAddAttachment() - Full Documentation →
deleteAttachment()
Delete an attachment from a specific comment annotation.- Params: DeleteAttachmentConfig
- Returns:
Promise<DeleteAttachmentEvent | null> - React Hook:
useDeleteAttachment() - Full Documentation →
getAttachment()
Get attachments from a specific comment annotation.- Params: GetAttachmentRequest
- Returns:
Promise<Attachment[]> - React Hook:
useGetAttachment() - Full Documentation →
setAllowedFileTypes()
Limit file types in comment attachments by specifying allowed file extensions.- Params:
string[](array of file extensions) - Returns:
void - React Hook:
n/a - Full Documentation →
setComposerFileAttachments()
Programmatically add file attachments to the comment composer from your application instead of requiring users to select files from the file system.- Params: UploadFileData
- Returns:
void - React Hook:
n/a - Full Documentation →
Reactions
enableReactions()
Enable emoji reactions in comments.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
setCustomReactions()
Set custom reactions by passing a map containing reaction information.- Params:
{[reactionId: string]: {url?: string, emoji?: string}} - Returns:
void - React Hook:
n/a - Full Documentation →
addReaction()
Add a reaction to a specific comment annotation.- Params: AddReactionRequest
- Returns:
Promise<AddReactionEvent | null> - React Hook:
useAddReaction() - Full Documentation →
deleteReaction()
Delete a reaction from a specific comment annotation.- Params: DeleteReactionRequest
- Returns:
Promise<DeleteReactionEvent | null> - React Hook:
useDeleteReaction() - Full Documentation →
toggleReaction()
Toggle a reaction for a specific comment annotation.- Params: ToggleReactionRequest
- Returns:
Promise<ToggleReactionEvent | null> - React Hook:
useToggleReaction() - Full Documentation →
Status & Priority
enableStatus()
Enable status dropdown & filters in comments.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
setCustomStatus()
Set custom statuses by passing an array of status objects.- Params:
StatusConfig[] - Returns:
void - React Hook:
n/a - Full Documentation →
enableResolveButton()
Enable resolve button on comments.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
updateStatus()
Update the status of a comment annotation.- Params: UpdateStatusRequest
- Returns:
Promise<UpdateStatusEvent> - React Hook:
useUpdateStatus() - Full Documentation →
resolveCommentAnnotation()
Resolve a comment annotation.- Params: ResolveCommentAnnotationRequest
- Returns:
Promise<ResolveCommentAnnotationEvent> - React Hook:
useResolveCommentAnnotation() - Full Documentation →
enablePriority()
Enable priority settings in comments.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
setCustomPriority()
Set custom priorities by passing an array of priority objects.- Params:
PriorityConfig[] - Returns:
void - React Hook:
n/a - Full Documentation →
updatePriority()
Update the priority of a comment annotation.- Params: UpdatePriorityRequest
- Returns:
Promise<UpdatePriorityEvent> - React Hook:
useUpdatePriority() - Full Documentation →
Recordings
deleteRecording()
Delete a recording from a comment.- Params: DeleteRecordingRequest
- Returns:
Promise<DeleteRecordingEvent | null> - React Hook:
useDeleteRecording() - Full Documentation →
getRecording()
Get recordings from a comment.- Params: GetRecordingRequest
- Returns:
Promise<RecordedData[]> - React Hook:
useGetRecording() - Full Documentation →
setAllowedRecordings()
Set allowed recording types (audio, video, screen).- Params:
string - Returns:
void - React Hook:
n/a - Full Documentation →
enableRecordingCountdown()
Enable countdown before recording starts.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableRecordingTranscription()
Enable AI transcription for recordings.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
Deep Link
getLink()
Get a link to a specific comment annotation.- Params: GetLinkRequest
- Returns: GetLinkResponse
- React Hook:
useGetLink() - Full Documentation →
copyLink()
Copy a link to a specific comment annotation to clipboard.- Params: CopyLinkRequest
- Returns: CopyLinkEvent
- React Hook:
useCopyLink() - Full Documentation →
Navigation
scrollToCommentByAnnotationId()
Scroll the page to a comment’s location.- Params:
annotationId: string - Returns:
void - React Hook:
n/a - Full Documentation →
selectCommentByAnnotationId()
Programmatically select a comment annotation.- Params:
annotationId: string - Returns:
void - React Hook:
n/a - Full Documentation →
onCommentSelectionChange()
Subscribe to comment selection changes.- Params: none
- Returns:
Observable<CommentSelectionChangeData> - React Hook:
useCommentSelectionChangeHandler() - Full Documentation →
enablescrollToComment()
Enable automatic scrolling to comments.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
DOM Controls
allowedElementIds()
Set allowed element IDs for commenting.- Params:
elementIds: string[] - Returns:
void - React Hook:
n/a - Full Documentation →
allowedElementClassNames()
Set allowed element class names for commenting.- Params:
classNames: string[] - Returns:
void - React Hook:
n/a - Full Documentation →
allowedElementQuerySelectors()
Set allowed element query selectors for commenting.- Params:
selectors: string[] - Returns:
void - React Hook:
n/a - Full Documentation →
AI Categorization
enableAutoCategorize()
Enable AI auto-categorization of comments.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
setCustomCategory()
Set custom categories for comment categorization.- Params:
categories: Array<{id: string, name: string, color: string}> - Returns:
void - React Hook:
n/a - Full Documentation →
UI
updateCommentDialogPosition()
Update position of comment dialog relative to pin.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableSidebarButtonOnCommentDialog()
Enable sidebar button on comment dialogs.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
onSidebarButtonOnCommentDialogClick()
Subscribe to clicks on comment dialog sidebar button.- Params: none
- Returns:
Observable<any> - React Hook:
useCommentDialogSidebarClickHandler() - Full Documentation →
enableDeleteReplyConfirmation()
Enable confirmation dialog before deleting replies.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableMobileMode()
Enable mobile-optimized comment UI.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableCommentPinHighlighter()
Enable highlighting outline around comment pins.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
showCommentsOnDom()
Show comments on the DOM.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableDialogOnHover()
Enable showing comment dialog on hover.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableFloatingCommentDialog()
Enable floating comment dialog next to pins.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
showResolvedCommentsOnDom()
Show resolved comments on the DOM.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableCollapsedComments()
Enable collapsing of comments in annotations.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableShortUserName()
Enable shortening of long user names.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableSignInButton()
Enable sign in button on comment dialog when user is anonymous or signed out.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
onSignIn()
Handle sign in button click event.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
Extra Information
enableCommentIndex()
Enable comment index indicators on pins and sidebar.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableDeviceInfo()
Enable device type indicators in comment threads.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableDeviceIndicatorOnCommentPins()
Enable device type indicators on comment pins.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableGhostComments()
Enable showing ghost comments on the DOM.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableGhostCommentsIndicator()
Enable ghost comment labels in the sidebar.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
Special File Type Support
enableSvgAsImg()
Treat SVGs as flat images instead of layered elements.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
Keyboard Controls
enableHotkey()
Enable hotkeys for comments (e.g. ‘c’ to enable comment mode).- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableEnterKeyToSubmit()
Enable using Enter key to submit comments.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableDeleteOnBackspace()
Enable deleting comments with backspace key.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
Moderation
enableModeratorMode()
Enable moderator mode for comments requiring approval.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableResolveStatusAccessAdminOnly()
Restrict resolve action to admin users and comment authors.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
approveCommentAnnotation()
Approve a comment annotation in moderator mode.- Params:
ApproveCommentAnnotationRequest - Returns:
Promise<ApproveCommentAnnotationEvent> - React Hook:
useApproveCommentAnnotation() - Full Documentation →
acceptCommentAnnotation()
Accept a comment annotation in suggestion mode.- Params:
AcceptCommentAnnotationRequest - Returns:
Promise<AcceptCommentAnnotationEvent> - React Hook:
useAcceptCommentAnnotation() - Full Documentation →
rejectCommentAnnotation()
Reject a comment annotation in suggestion mode.- Params:
RejectCommentAnnotationRequest - Returns:
Promise<RejectCommentAnnotationEvent> - React Hook:
useRejectCommentAnnotation() - Full Documentation →
enableSuggestionMode()
Enable suggestion mode for accepting/rejecting comments.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
updateAccess()
Update access permissions for a comment annotation.- Params:
UpdateAccessRequest - Returns:
Promise<UpdateAccessEvent> - React Hook:
useUpdateAccess() - Full Documentation →
enablePrivateCommentMode()
Enable private comment mode for admin-only comments.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
Comment Read Status
enableSeenByUsers()
Enable “Seen By” feature to show which users have seen each comment.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
setUnreadIndicatorMode()
Set unread indicator mode to either minimal (dot) or verbose (badge).- Params:
mode: "minimal" | "verbose" - Returns:
void - React Hook:
n/a - Full Documentation →
Toggle Comment Types
enableAreaComment()
Enable area comments that allow drawing rectangles with comments.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableInboxMode()
Enable inbox mode for comments.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enablePopoverMode()
Enable popover mode for comments.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableStreamMode()
Enable stream mode for comments.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableTextMode()
Enable text mode for comments.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableInlineCommentMode()
Enable inline comment mode to show comments under associated text.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableMultithread()
Enable multithreaded comments.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
Comment Bubble
enableGroupMatchedComments()
Enable grouping of multiple comment annotations in Comment Bubble component when multiple annotations match the providedcontext or targetElementId.
- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
Comment Tool
enableCommentMode()
Enable comment mode to allow attaching comments to DOM elements.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
onCommentModeChange()
Subscribe to changes in comment mode state.- Params: none
- Returns:
Observable<boolean> - React Hook:
useCommentModeState() - Full Documentation →
enableCommentTool()
Enable/disable the comment tool button.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableChangeDetectionInCommentMode()
Enable DOM change detection while in comment mode.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enablePersistentCommentMode()
Enable persistent comment mode to continue leaving comments after finishing one.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableForceCloseAllOnEsc()
Force close persistent comment mode when ESC key is pressed, even if a comment thread is active.- Params: none
- Returns:
void - React Hook:
useCommentUtils() - Full Documentation →
disableForceCloseAllOnEsc()
Disable force close behavior for persistent comment mode when ESC key is pressed.- Params: none
- Returns:
void - React Hook:
useCommentUtils() - Full Documentation →
setPinCursorImage()
Set custom cursor image for comment mode.- Params:
base64ImageString: string - Returns:
void - React Hook:
n/a - Full Documentation →
Minimap
enableMinimap()
Enable minimap showing comment locations on screen edge.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
Popover Comments
enableDialogOnTargetElementClick()
Enable opening comment dialog on target element click in popover mode.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enablePopoverTriangleComponent()
Enable triangle indicator on popover comments.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
Video Timeline Comments
setTotalMediaLength()
Set the total length of media (in frames or seconds) for the timeline.- Params:
length: number - Returns:
void - React Hook:
n/a - Full Documentation →
Comment Pin
enableBubbleOnPin()
Show a Comment Bubble when hovering/clicking on Comment Pin instead of Comment Dialog.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableBubbleOnPinHover()
Show Comment Bubble on hover vs click for Comment Pins.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
Comments Sidebar
Custom filtering, sorting and grouping
enableSidebarCustomActions()
Enable custom filtering, sorting and grouping actions in the comments sidebar.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
setCommentSidebarData()
Set filtered/sorted/grouped data in the comments sidebar.- Params:
data: CommentSidebarData[], options?: {grouping?: boolean} - Returns:
void - React Hook:
n/a - Full Documentation →
Navigation
onCommentClick()
Listen for comment click events in the sidebar.- Params:
(event: {documentId: string, location: Object, targetElementId: string, context: Object, annotation: CommentAnnotation}) => void - Returns:
void - React Hook:
n/a - Full Documentation →
enableSidebarUrlNavigation()
Enable automatic URL navigation when clicking comments in the sidebar.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
UI
openCommentSidebar()
Open the comments sidebar.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
closeCommentSidebar()
Close the comments sidebar.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
toggleCommentSidebar()
Toggle the comments sidebar open/closed state.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableFullScreenInSidebar()
Enable full-screen mode for the Comments Sidebar (only works in default mode).- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
disableFullScreenInSidebar()
Disable full-screen mode for the Comments Sidebar.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
excludeLocationIdsFromSidebar()
Filter out comments from specified locations in the sidebar.- Params:
locationIds: string[] - Returns:
void - React Hook:
n/a - Full Documentation →
System Filters, Sorting and Grouping
setCommentSidebarFilters()
Set filters for the comments sidebar programmatically.- Params:
filters: {location?: {id: string}[], people?: ({userId: string} | {email: string})[], priority?: string[], status?: string[], category?: string[]} - Returns:
void - React Hook:
n/a - Full Documentation →
Notifications
Data
getNotificationsData()
Get the notifications data for the current user.- Params:
- query: Optional.
GetNotificationsDataQuerytype: Filter for notification type: all, for you, or documents.forYou: returns notifications where the current user is involved.all/documents: returns all notifications from the documents the user has access to.
- query: Optional.
- Returns:
Observable<Notification[]> - React Hook:
useNotificationsData() - Full Documentation →
getUnreadNotificationsCount()
Get count of unread notifications by tab.- Params: none
- Returns:
Observable<{forYou: number, all: number}> - React Hook:
useUnreadNotificationsCount() - Full Documentation →
Event Subscription
on()
Subscribe to Notification events.- Params:
NotificationEventType. Here is the list of events you can subscribe to. - Returns:
Observable<NotificationEventTypesMap[T]>. Here is the list of events object types you can expect to receive. - React Hook:
useNotificationEventCallback(NotificationEventType)
onNotificationClick()
Listen for notification click events in the Notifications Panel.- Params:
(notification: Notification) => void - Returns:
void - React Hook:
n/a - Full Documentation →
Configuration
setTabConfig()
Customize notification tab names and visibility.- Params:
tabConfig: TabConfig - Returns:
void - React Hook:
n/a - Full Documentation →
setMaxDays()
Set maximum age in days for displayed notifications.- Params:
days: number - Returns:
void - React Hook:
n/a - Full Documentation →
enableReadNotificationsOnForYouTab()
Show read notifications in the “For You” tab.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
Actions
setAllNotificationsAsRead()
Mark all notifications as read globally or by tab.- Params:
options?: {tabId?: string} - Returns:
void - React Hook:
n/a - Full Documentation →
markNotificationAsReadById()
Mark a specific notification as read.- Params:
notificationId: string - Returns:
void - React Hook:
n/a - Full Documentation →
Notification Settings
enableSettings()
Enable or disable the settings feature for notifications.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
disableSettings()
Disable the settings feature for notifications.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
setSettingsInitialConfig()
Set the initial default configuration for notification settings.- Params:
NotificationInitialSettingsConfig[] - Returns:
void - React Hook:
n/a - Full Documentation →
muteAllNotifications()
Mute all notifications across all channels for the current user.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
setSettings()
Update notification settings configuration for the current user.- Params:
NotificationSettingsConfig - Returns:
void - React Hook:
n/a - Full Documentation →
getSettings()
Get the current notification settings configuration for the user.- Params: none
- Returns:
Observable<NotificationSettingsConfig> - React Hook:
n/a - Full Documentation →
enableCurrentDocumentOnly()
Filters notifications to show only those from the current document.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
disableCurrentDocumentOnly()
Shows notifications from all documents, not just the current document.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
Recorder
downloadLatestVideo()
Downloads the latest version of a recording.- Params:
recorderId: string - Returns:
Promise<boolean> - React Hook:
n/a - Full Documentation →
enableRecordingCountdown()
Controls whether to display a countdown timer before a recording starts.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableRecordingTranscription()
Controls whether to enable AI transcription for recordings.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
fetchRecordings()
Fetches recording data.- Params: RecorderRequestQuery
- Returns:
Promise<GetRecordingDataResponse> - React Hook:
n/a - Full Documentation →
RecorderElement Methods
setMaxLength()
Sets the maximum recording duration in seconds.- Params:
value: number - Returns:
void - React Hook:
n/a - Full Documentation →
enablePictureInPicture()
Enables Picture-in-Picture mode for recordings.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
disablePictureInPicture()
Disables Picture-in-Picture mode for recordings.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
openPictureInPicture()
Opens the Picture-in-Picture window for the current recording.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
exitPictureInPicture()
Exits the Picture-in-Picture window.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
requestScreenPermission()
Requests screen capture permissions for recording preview.- Params: none
- Returns:
Promise<void> - React Hook:
n/a - Full Documentation →
enablePlaybackOnPreviewClick()
Enables click-to-play/pause functionality on recording preview thumbnails.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
disablePlaybackOnPreviewClick()
Disables click-to-play/pause functionality on recording preview thumbnails.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
Event Subscription
on()
Subscribe to Recorder events.- Params:
RecorderEventType. Here is the list of events you can subscribe to. - Returns:
Observable<RecorderEventTypesMap[T]>. Here is the list of events object types you can expect to receive. - React Hook:
useRecorderEventCallback(RecorderEventType) - Full Documentation →
Inline Reactions
setCustomReactions()
Set custom reaction emojis for inline reactions.- Params:
customReactions: { [reactionId: string]: { url?: string, emoji?: string } } - Returns:
void - React Hook:
n/a - Full Documentation →
View Analytics
getUniqueViewsByUser()
Get unique views by user, optionally filtered by location.- Params:
locationId?: string - Returns:
Observable<ViewsByUser[]> - React Hook:
useUniqueViewsByUser() - Full Documentation →
getUniqueViewsByDate()
Get unique views by date, optionally filtered by location.- Params:
locationId?: string - Returns:
Observable<ViewsByDate[]> - React Hook:
useUniqueViewsByDate() - Full Documentation →
Live State Sync
getLiveStateData()
Retrieves live state data as an observable based on the provided ID.- Params:
liveStateDataId?: string - Returns:
Observable<any> - React Hook:
n/a - Full Documentation →
setLiveStateData()
Sets live state data for the provided ID and data.- Params:
liveStateDataId:stringliveStateData:anyconfig:SetLiveStateDataConfig
- Returns:
any - React Hook:
useSetLiveStateData() - Full Documentation →
fetchLiveStateData()
Fetches live state data as a Promise. Use this when you need to retrieve the current state once, rather than subscribing to ongoing changes.- Params:
request?:FetchLiveStateDataRequest - Optional. If not provided or if liveStateDataId is not specified, all live state data will be returned. - Returns:
Promise<T>- Generic type support allows you to specify the expected data type - React Hook:
n/a - Full Documentation →
Single Editor Mode
enableSingleEditorMode()
Enables the single editor mode with an optional configuration.- Params:
config?: SingleEditorConfig - Returns:
void - React Hook:
n/a - Full Documentation →
disableSingleEditorMode()
Disables the single editor mode.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
isUserEditor()
Checks if the current user is an editor. Returns an observable.- Params: none
- Returns:
Observable<UserEditorAccess | null> - React Hook:
n/a - Full Documentation →
getEditor()
Retrieves the current editor information.- Params: none
- Returns:
Observable<User | null> - React Hook:
n/a - Full Documentation →
setUserAsEditor()
Sets the current user as an editor.- Params: none
- Returns:
Promise<SetUserAsEditorResponse | void> - React Hook:
n/a - Full Documentation →
SetUserAsEditorResponse.error:
same_user_editor_current_tabsame_user_editor_different_tabanother_user_editor
resetUserAccess()
Resets the user access.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
singleEditorModeContainerIds()
Disables elements inside specific elements only when single editor mode is on.- Params:
elementIds: string[] - Returns:
void - React Hook:
n/a - Full Documentation →
enableAutoSyncState()
Enables the autosync state feature.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
requestEditorAccess()
Initiates a request for editor access.- Params: none
- Returns:
Observable<boolean | null> - React Hook:
n/a - Full Documentation →
isEditorAccessRequested()
Checks if editor access has been requested.- Params: none
- Returns:
Observable<{ requestStatus: string, requestedBy: User } | null> - React Hook:
n/a - Full Documentation →
acceptEditorAccessRequest()
Accepts an editor access request.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
rejectEditorAccessRequest()
Rejects an editor access request.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
cancelEditorAccessRequest()
Cancels an editor access request.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
editCurrentTab()
Edits the current tab.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
setEditorAccessTimeout()
Sets a timeout for editor access. (in milliseconds)- Params:
timeout: number - Returns:
void - React Hook:
n/a - Full Documentation →
enableEditorAccessTransferOnTimeOut()
Enables the transfer of editor access on timeout.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableDefaultSingleEditorUI()
Enables the default UI for single editor mode.- Params: none
- Returns:
void - React Hook:
n/a - Full Documentation →
enableHeartbeat()
Enables the heartbeat mechanism for Single Editor Mode presence detection. This feature is enabled by default when single editor mode is enabled.- Params:
void - Returns:
void - React Hook:
n/a - Full Documentation →
disableHeartbeat()
Disables the heartbeat mechanism for Single Editor Mode presence detection. Must be called before enabling single editor mode if you don’t want to use the heartbeat functionality.- Params:
void - Returns:
void - React Hook:
n/a - Full Documentation →
Cursors
setInactivityTime()
Set the time it takes for a user’s cursor to be marked as inactive.- Params:
milliseconds: number - Returns:
void - React Hook:
n/a - Full Documentation →
allowedElementIds()
Set specific element IDs where cursors should be shown.- Params:
elementIds: string[] - Returns:
void - React Hook:
n/a - Full Documentation →
onCursorUserChange()
Subscribe to cursor position changes for all users.- Params:
callback: (cursorUsers: CursorUser[]) => void - Returns:
void - React Hook:
n/a - Full Documentation →
Presence
updateUserPresence()
Send a lightweight heartbeat from your host app to Velt. Velt will use that as a fallback in rare edge cases if it fails to detect multi‑tab/device presence. Most apps don’t need this; use only if you see ambiguity in who’s the active editor.- Params:
userPresence: LiveStateSingleEditorExternalUserPresence - Returns:
void - React Hook:
n/a - Full Documentation → See types: LiveStateSingleEditorExternalUserPresence
- Params:
milliseconds: number - Returns:
void - React Hook:
n/a - Full Documentation →
enableSelf()
Include the current user in the list of presence users.- Params:
none - Returns:
void - React Hook:
n/a - Full Documentation →
on()
Subscribe to Presence events.- Params:
PresenceEventType. Here is the list of events you can subscribe to. - Returns:
Observable<PresenceEventTypesMap[T]>. Here is the list of events object types you can expect to receive. - React Hook:
usePresenceEventCallback(PresenceEventType) - Full Documentation →
onPresenceUserChange()
Subscribe to presence changes for all users.- Params:
callback: (presenceUsers: PresenceUser[]) => void - Returns:
void - React Hook:
n/a - Full Documentation →
onPresenceUserClick()
Handle click events on presence avatar circles.- Params:
callback: (user: User) => void - Returns:
void - React Hook:
n/a - Full Documentation →
getData()
Subscribe to presence data.- Params:
PresenceRequestQuery - Returns:
Observable<GetPresenceDataResponse> - React Hook:
usePresenceData() - Full Documentation →
Follow Mode
enableFlockMode()
Enable Follow Me mode globally wherever Presence is shown.- Params:
none - Returns:
void - React Hook:
n/a - Full Documentation →
startFollowingUser()
Start following a specific user.- Params:
userId: string - Returns:
void - React Hook:
n/a - Full Documentation →
stopFollowingUser()
Stop following the current user.- Params:
none - Returns:
void - React Hook:
n/a - Full Documentation →
onNavigate()
Handle navigation events during Follow Me sessions.- Params:
callback: (pageInfo: PageInfo) => void - Returns:
void - React Hook:
n/a - Full Documentation →
Huddle
enableChat()
Enable the ephemeral chat feature in Huddle.- Params:
none - Returns:
void - React Hook:
n/a - Full Documentation →
enableFlockModeOnAvatarClick()
Enable Follow Me mode when clicking on a user’s avatar in Huddle.- Params:
none - Returns:
void - React Hook:
n/a - Full Documentation →
Live Selection
enableDefaultElementsTracking()
Enable automatic tracking of user presence on default element types (input, textarea, button, contenteditable).- Params:
none - Returns:
void - React Hook:
n/a - Full Documentation →
enableUserIndicator()
Enable the user indicator (avatar/name label) that appears near selected elements.- Params:
none - Returns:
void - React Hook:
n/a - Full Documentation →
setUserIndicatorPosition()
Set the position of the user indicator globally.- Params:
position: 'start' | 'end' - Returns:
void - React Hook:
n/a - Full Documentation →
setUserIndicatorType()
Set the type of user indicator globally.- Params:
type: 'avatar' | 'label' - Returns:
void - React Hook:
n/a - Full Documentation →
getLiveSelectionData()
Get the live selection data for the current document.- Params:
none - Returns:
Observable<LiveSelectionData> - React Hook:
useLiveSelectionDataHandler() - Full Documentation →
AI
enableRewriter()
Enable the rewriter.- Signature:
enableRewriter() - Params:
n/a - Returns:
void - React Hook:
n/a
ReactFlow
useVeltReactFlowCrdtExtension()
Provides real-time collaborative ReactFlow editor functionality with Yjs and Velt SDK synchronization.- Signature: useVeltReactFlowCrdtExtension(config: VeltReactFlowCrdtExtensionConfig)
- Params: VeltReactFlowCrdtExtensionConfig
- Returns: VeltReactFlowCrdtExtensionResponse
- React Hook:
useVeltReactFlowCrdtExtension() - Full Documentation →
veltReactFlowStore
Create and initialize a collaborative React Flow Zustand store.- Params: VeltReactFlowStoreConfig
- React Hook:
n/a - Full Documentation →
onNodesChange
CRDT-aware handler to apply node changes (add/update/remove) that sync across collaborators.- Params: NodeChange[]
- Returns:
void - React Hook:
n/a - Full Documentation →
onEdgesChange
CRDT-aware handler to apply edge changes (add/update/remove) that sync across collaborators.- Params: EdgeChange[]
- Returns:
void - React Hook:
n/a - Full Documentation →
onConnect
CRDT-aware connect handler compatible with React Flow’sonConnect prop.
- Params: Connection
- Returns:
void - React Hook:
n/a - Full Documentation →
setNodes
Imperative setter for nodes (useful for non-event updates). Synced via the store.- Params: Node[] | ((prev: Node[]) => Node[])
- Returns:
void - React Hook:
n/a - Full Documentation →
setEdges
Imperative setter for edges (useful for non-event updates). Synced via the store.- Params: Edge[] | ((prev: Edge[]) => Edge[])
- Returns:
void - React Hook:
n/a - Full Documentation →
Encryption
setEncryptionProvider(encryptionProvider)
Register a custom encrypt/decrypt provider used by CRDT features.- Params:
VeltEncryptionProvider - Returns:
void - Full Documentation →
CodeMirror
useVeltCodeMirrorCrdtExtension()
Provides real-time collaborative CodeMirror editor functionality with Yjs and Velt SDK synchronization.- Signature: useVeltCodeMirrorCrdtExtension(config: VeltCodeMirrorCrdtExtensionConfig)
- Params: VeltCodeMirrorCrdtExtensionConfig
- Returns: Extension | null
- React Hook:
useVeltCodeMirrorCrdtExtension() - Full Documentation →
createVeltCodeMirrorStore
Create and initialize a collaborative CodeMirror store instance.- Params:
VeltCodeMirrorStoreConfig - Returns:
Promise<VeltCodeMirrorStore | null> - React Hook:
n/a - Full Documentation →
getStore()
Get the underlying Store that manages state and synchronization.- Params:
none - Returns:
Store<string> - React Hook:
n/a - Full Documentation →
getYDoc()
Access the Yjs document used for collaborative editing.- Params:
none - Returns:
Y.Doc - React Hook:
n/a - Full Documentation →
getYText()
Get the shared Y.Text bound to the current CodeMirror document.- Params:
none - Returns:
Y.Text | null - React Hook:
n/a - Full Documentation →
getAwareness()
Access the Yjs Awareness instance associated with the store.- Params:
none - Returns:
Awareness - React Hook:
n/a - Full Documentation →
getUndoManager()
Access the Yjs UndoManager for collaborative undo/redo.- Params:
none - Returns:
Y.UndoManager - React Hook:
n/a - Full Documentation →
destroy()
Clean up listeners and release resources.- Params:
none - Returns:
void - React Hook:
n/a - Full Documentation →
BlockNote
useVeltBlockNoteCrdtExtension()
Provides real-time collaborative BlockNote editor functionality with Yjs and Velt SDK synchronization.- Signature: useVeltBlockNoteCrdtExtension(config: VeltBlockNoteCrdtExtensionConfig)
- Params: VeltBlockNoteCrdtExtensionConfig
- Returns: VeltCodeMirrorCrdtExtensionResponse
- React Hook:
useVeltBlockNoteCrdtExtension() - Full Documentation →
createVeltBlockNoteStore()
Create and initialize a collaborative BlockNote store instance.- Params:
VeltBlockNoteStoreConfig - Returns:
VeltBlockNoteStore | null - React Hook:
n/a - Full Documentation →
initialize()
Start syncing the collaborative document (usually auto-called by the factory).- Params:
none - Returns:
void - React Hook:
n/a - Full Documentation →
destroy()
Tear down the store and clean listeners/resources.- Params:
none - Returns:
void - React Hook:
n/a - Full Documentation →
getStore()
Access the underlying CRDT store (yjs doc + provider).- Params:
none - Returns:
Store - React Hook:
n/a - Full Documentation →
getYDoc()
Accessor for the underlying Yjs document.- Params:
none - Returns:
Y.Doc - React Hook:
n/a - Full Documentation →
getYXml()
Get the Y.XmlFragment representing the BlockNote document tree.- Params:
none - Returns:
Y.XmlFragment | null - React Hook:
n/a - Full Documentation →
Tiptap
useVeltTiptapCrdtExtension()
Provides real-time collaborative Tiptap editor functionality with Yjs and Velt SDK synchronization.- Signature: useVeltTiptapCrdtExtension(config: VeltTiptapCrdtExtensionConfig)
- Params: VeltTiptapCrdtExtensionConfig
- Returns: VeltTiptapCrdtExtensionResponse
- React Hook:
useVeltTiptapCrdtExtension() - Full Documentation →
createVeltTipTapStore()
Create and initialize a collaborative Tiptap store instance.- Params:
config - Returns:
VeltTipTapStore | null - React Hook:
n/a - Full Documentation →
initialize()
Initialize the store and start syncing the collaborative document.- Params:
none - Returns:
void - React Hook:
n/a - Full Documentation →
getCollabExtension()
Get the Tiptap collaboration extension bound to the current Yjs document.- Params:
none - Returns:
Extension - React Hook:
n/a - Full Documentation →
destroy()
Tear down the store and clean up listeners/resources.- Params:
none - Returns:
void - React Hook:
n/a - Full Documentation →
getStore()
Access the underlying CRDT store managing document state.- Params:
none - Returns:
Store - React Hook:
n/a - Full Documentation →
getYDoc()
Accessor for the underlying Yjs document.- Params:
none - Returns:
Y.Doc - React Hook:
n/a - Full Documentation →
getYXml()
Accessor for the XML fragment in the Yjs document.- Params:
none - Returns:
Y.XmlFragment | null - React Hook:
n/a - Full Documentation →
Core
Client
initConfig()
Set up initial configurations for the Velt SDK.- Params:
apiKey: string, config?: Config - Returns:
void - React Hook:
n/a
getVeltInitState()
Subscribe to detect whether Velt is initialized.- Params:
void - Returns:
Observable<boolean> - React Hook:
useVeltInitState()
get Velt Client
Access the core Velt client instance to call SDK APIs and subscribe to core events.- Signature:
- React:
const { client } = useVeltClient() - Other frameworks:
const client = await initVelt(apiKey) - HTML:
await Velt.init(apiKey)then useVelt
- React:
- Params:
noneHere is the list of events you can subscribe to. - Returns:
VeltHere is the list of events object types you can expect to receive. - React Hook:
useVeltClient() - See event payloads: Core data model
- Overview: Client Event Subscriptions
getMetadata()
Get the currently set organization, document and location objects.- Params: none
- Returns:
Promise<VeltEventMetadata> - React Hook:
n/a
getUserPermissions()
Get the current user’s access roles across organization, folder, and document scopes.- Params: GetUserPermissionsRequest
- Returns:
Promise<GetUserPermissionsResponse> - React Hook:
n/a - Full Documentation →
errorCode from the UserPermissionAccessRoleResult enum:
does_not_exist: Resource not foundpermission_denied: User lacks access to the resourcesomething_went_wrong: Unexpected error
Authentication
identify()
Authenticate the client’s user with the Velt SDK.- Params:
user: User, userOptions?: UserOptions - Returns:
Promise<unknown> - React Hook:
useIdentify()
setPermissionProvider()
Configure a permission provider for real-time access validation. Instead of pre-syncing users via REST API or passing details in theidentify method, Velt validates access requests in real-time by querying your authorization service.
- Params: VeltPermissionProvider
- Returns:
void - React Hook:
n/a - Full Documentation →
Prerequisites: Set your API key’s
defaultDocumentAccessType to restricted in the console to ensure access is denied by default unless explicitly granted through the provider.signOutUser()
To sign out a user.- Params:
void - Returns:
any - React Hook:
n/a
getUser()
Get the current authenticated user in Velt.- Params:
void - Returns:
User - React Hook:
n/a
Collaboration
createVeltStore()
Create and initialize a collaborative CRDT store instance.- Params:
StoreConfig<T> - Returns:
Promise<Store<T> | null> - React Hook:
n/a - Full Documentation →
getDoc()
Get the underlying Yjs document.- Params:
none - Returns:
Y.Doc - React Hook:
n/a - Full Documentation →
getProvider()
Get the provider instance for the store.- Params:
none - Returns:
Provider - React Hook:
n/a - Full Documentation →
getText()
Get the Y.Text instance if store type is ‘text’.- Params:
none - Returns:
Y.Text | null - React Hook:
n/a - Full Documentation →
getXml()
Get the Y.XmlFragment instance if store type is ‘xml’.- Params:
none - Returns:
Y.XmlFragment | null - React Hook:
n/a - Full Documentation →
useVeltCrdtStore()
React Hook to create and sync a CRDT store.- Params:
VeltCrdtStoreConfig<T> - Returns:
Store<T> - React Hook:
Yes - Full Documentation →
update()
Update the store value.- Params:
newValue: T - Returns:
void - React Hook:
update() - Full Documentation →
saveVersion()
Save the current state as a named version.- Params:
versionName: string - Returns:
Promise<string> - React Hook:
saveVersion() - Full Documentation →
getVersions()
Retrieve all saved versions.- Params:
none - Returns:
Promise<Version[]> - React Hook:
getVersions() - Full Documentation →
getVersionById()
Fetch a specific version by ID.- Params:
versionId: string - Returns:
Promise<Version | null> - React Hook:
getVersionById() - Full Documentation →
setStateFromVersion()
Restore the state from a given version.- Params:
version: Version - Returns:
Promise<void> - React Hook:
setStateFromVersion() - Full Documentation →
destroy()
Destroy the store, cleaning up resources and listeners.- Params:
none - Returns:
void - React Hook:
n/a - Full Documentation →
subscribe()
Subscribe to store updates.- Params:
(newValue: T) => void - Returns:
() => void(unsubscribe) - React Hook:
n/a - Full Documentation →
getValue()
Get the current store value.- Params:
none - Returns:
T - React Hook:
value - Full Documentation →
value
Current value of the store.- Params:
none - Returns:
T | null - React Hook:
value - Full Documentation →
versions
List of all stored versions.- Params:
none - Returns:
Version[] - React Hook:
versions - Full Documentation →
store
Underlying Velt Store instance.- Params:
none - Returns:
Store<T> | null - React Hook:
store - Full Documentation →
restoreVersion()
Restore the store to a specific version by ID.- Params:
versionId: string - Returns:
Promise<boolean> - React Hook:
restoreVersion() - Full Documentation →
Folders
fetchFolders()
Fetch folder metadata and subfolders by organizationId, folderId with pagination.- Params:
fetchFoldersRequest: FetchFoldersRequest - Returns:
Observable<FetchFoldersResponse> - React Hook:
n/a - Full Documentation →
Documents
setDocuments()
Initialize and subscribe to multiple Documents at once.- Params:
documents: Document[]options?: SetDocumentsRequestOptions
- Returns:
Promise<void> - React Hook:
useSetDocuments() - Full Documentation →
Behavior Update: This method now filters out documents the user doesn’t have access to instead of failing the entire operation. When using the
allDocuments flag with a folder, only the first 50 documents are retrieved, and any inaccessible documents are automatically filtered out.setDocument()
Initialize and subscribe to a single Document.- Params:
documentId: stringmetadata?: DocumentMetadata
- Returns:
Promise<void> - React Hook:
useSetDocument() - Full Documentation →
setRootDocument()
Set a different document as the root document when multiple documents are active.- Params:
document:Document - Returns:
Promise<void> - React Hook:
n/a
unsetDocuments()
Use this to unsubscribe from all documents at once.- Params:
void - Returns:
void - React Hook:
useUnsetDocuments() - Full Documentation →
fetchDocuments()
Fetch document metadata byorganizationId, folderId, or specific documentIds. Supports pagination.
- Params: FetchDocumentsRequest
- Returns:
Promise<FetchDocumentsResponse> - React Hook:
n/a - Full Documentation →
updateDocuments()
Update document metadata by organizationId, folderId or documentIds.- Params:
UpdateDocumentsRequest<T = unknown> - Returns:
Promise<void> - React Hook:
n/a - Full Documentation →
Location
setLocation()
Set the current location context. Used to define specific areas within a document.- Params:
location: Location, isAdditional?: booleanlocation: Location object with:id: Required unique identifierlocationName?: Optional display name for UI componentsversion?: Optional version object with:id: Version identifiername: Version display name
- Additional custom key/value pairs
isAdditional?: Boolean to add additional locationsfalse(default): Set this as the root locationtrue: Add as additional location
- Returns:
Promise<void> - React Hook:
useSetLocation() - Full Documentation →
setLocations()
Initialize and/or append multiple locations at once.- Params:
locations: Location[]options?: SetLocationsRequestOptions
- Returns:
Promise<void> - React Hook:
n/a
setRootLocation()
Set a different location as the root location when multiple locations are active.- Params:
location:Location - Returns:
Promise<void> - React Hook:
n/a
removeLocations()
Remove multiple locations.- Params:
...locations:Location[] - Returns:
void - React Hook:
n/a
unsetLocationsIds()
Unset locations by ids or all of them if you don’t specify any parameters.- Params:
ids?: string[]- If no ids provided, removes all locations
- If ids provided, removes that specific location
- Returns:
void - React Hook:
n/a - Full Documentation →
Event Subscription
on()
Subscribe to Velt core events- Params:
eventType: string. Here is the list of events you can subscribe to. - Returns:
Observable<VeltEventTypesMap[T]>. It will return one of the objects from here - React Hook:
useVeltEventCallback()
Self Hosting
setDataProviders()
Set the data providers for self hosting data.- Params:
VeltDataProvider - Returns:
void - React Hook:
n/a - Full Documentation →
UI
setUiState()
Set custom state data that can be used in Velt wireframes, Velt if and Velt data components.- Params:
Record<string, any>- Object containing key-value pairs of custom state data
- Returns:
void - React Hook:
n/a
getUiState()
Get the custom UI state data.- Params:
void - Returns:
Observable<Record<string, any>>- Observable that emits the current UI state object
- React Hook:
n/a
injectCustomCss()
To inject custom CSS within Components with Shadow DOM enabled.- Params:
customCss: CustomCss - Returns:
void - React Hook:
n/a
removeVeltContent()
To remove Velt specific content from provided html content. This is useful when using Velt on a text editor or editable element.- Params:
htmlContent: string - Returns:
string - React Hook:
n/a
resetVeltButtonState()
Reset the state of Velt Button components.- Params: (optional) VeltResetButtonStateConfig
- Returns:
void - React Hook:
n/a - Full Documentation →
Feature Utilities
getPresenceElement()
Get the Presence Element Object to access the raw presence data.- Params:
void - Returns:
PresenceElement - React Hook:
n/a
getCursorElement()
Get the Cursor Element Object to access the raw cursor data.- Params:
void - Returns:
CursorElement - React Hook:
n/a
getCommentElement()
Get the Comment Element Object to access the raw comment data.- Params:
void - Returns:
CommentElement - React Hook:
useCommentUtils()
getSelectionElement()
Get the Selection Object to enable/disable the feature.- Params:
void - Returns:
SelectionElement - React Hook:
n/a
getRecorderElement()
Get the Recorder Object.- Params:
void - Returns:
RecorderElement - React Hook:
n/a
getContactElement()
Get the Contact Object.- Params:
void - Returns:
ContactElement - React Hook:
n/a
getRewriterElement()
Get the Rewriter Object.- Params:
void - Returns:
RewriterElement - React Hook:
n/a
getLiveStateSyncElement()
Get the LiveStateSync Object.- Params:
void - Returns:
LiveStateSyncElement - React Hook:
n/a
getArrowElement()
Get the Arrow Object.- Params:
void - Returns:
ArrowElement - React Hook:
n/a
Feature Gating
isUserAllowed$()
To check if user is allowed in provided document or not.- Params:
void - Returns:
Observable<boolean> - React Hook:
n/a
disableFeatures()
Provide a list of features to disable. Provide an empty array to enable all the features.- Params:
features: Array<FeatureType> - Returns:
void - React Hook:
n/a
isPlanExpired$()
To check if plan is expired or not.- Params:
void - Returns:
Observable<boolean> - React Hook:
n/a
Localization
setLanguage()
To set the language.- Params:
language: string - Returns:
void - React Hook:
n/a
setTranslations()
To set the translations for the language.- Params:
language: string, translations: { [key: string]: string } - Returns:
void - React Hook:
n/a
enableAutoTranslation()
To enable automatic translation of text in Velt Components based on User’s language preference.- Params:
void - Returns:
void - React Hook:
n/a
DOM Control
setScrollableElementsIds()
Tell us about the scrollable document ids to keep track on its scroll changes.- Params:
ids: string[] - Returns:
void - React Hook:
n/a
removeScrollableElementsIds()
To remove document params from a User.- Params:
void - Returns:
void - React Hook:
n/a