velt-js

@velt-js source repo

26 skills
0 followers
6 hours ago last updated

▌
Velt Help · velt-js
Answer questions about Velt features, best practices, and SDK usage.

0
installs
▌
Install Velt · velt-js
Full guided installation of the Velt collaboration SDK into a React or Next.js project.

0
installs
▌
Yjs Best Practices · velt-js bundle
Yjs CRDT best practices for building real-time collaborative applications. Use this skill when implementing collaborative editing, real-time sync, shared data structures, or any feature using Yjs (Y.Doc, Y.Text, Y.Array, Y.Map, Y.XmlFragment). Triggers on tasks involving Yjs, CRDTs, collaborative editors, y-websocket, y-webrtc, y-indexeddb, y-prosemirror, y-codemirror, y-quill, y-monaco, awareness/presence, undo/redo with shared types, or any mention of real-time document collaboration — even if the user doesn't explicitly say 'Yjs'.

0
installs
▌
Velt Area Best Practices · velt-js bundle
Best practices for Velt Area Comments — the rectangle area-annotation feature that lets users draw a region on the page and attach a comment thread to it (Figma-style 'draw a box and comment'). Use whenever the user is toggling area comments on or off (areaComment prop on VeltComments, or commentElement.enableAreaComment / disableAreaComment), customizing the area pin via the velt-area-pin-portal-wireframe tag, binding componentConfig.areaPinAnnotation / componentConfig.selected / componentConfig.isResizing / componentConfig.hideAreaAnnotation template variables, or reading the AreaAnnotation data model (annotationId, from, targetElements, areaProperties, targetAnnotations linking back to comments). Trigger on any task involving Velt area comments, rectangle annotations on documents, draw-a-box-and-comment UI, area pin customization, or the AreaAnnotation / AreaProperty / AreaTargetAnnotation shapes — even if the user does not explicitly say 'Velt' or 'area comments'.

0
installs
▌
Velt Crdt Best Practices · velt-js bundle
Velt CRDT (Yjs) collaborative editing best practices for real-time applications. This skill should be used when implementing collaborative features using Velt CRDT stores, integrating with editors like Tiptap, BlockNote, CodeMirror, or ReactFlow, or debugging sync issues. Triggers on tasks involving real-time collaboration, multiplayer editing, CRDT stores, or Velt SDK integration.

0
installs
▌
Velt Setup Best Practices · velt-js bundle
Velt collaboration SDK setup guide for React, Next.js, Angular, Vue, and HTML applications. Use this skill when setting up Velt for the first time, configuring VeltProvider, implementing user authentication with authProvider and JWT tokens, initializing document collaboration with setDocuments, adding VeltUserInviteTool for share & invite flows, or debugging Velt setup issues. Triggers on any task involving Velt installation, VeltProvider configuration, auth token generation, document identity setup, share/invite components, or project structure for Velt integration — even if the user doesn't explicitly mention "setup".

0
installs
▌
Velt Arrows Best Practices · velt-js bundle
Best practices for Velt Arrows — the directional arrow annotation feature that lets users draw arrows pinned to DOM elements for visual feedback, design review, or collaborative pointing. Use whenever the user is adding Velt Arrows to their app, placing the VeltArrows or VeltArrowTool components, restricting arrows to specific DOM regions via allowedElementIds, enabling dark mode, customizing the arrow tool button (CSS ::part hooks or full custom-button slot replacement), reading the ArrowAnnotation data model (annotationId, from, targetElement, position, props.arrowLength / props.arrowAngle), or working with the ArrowElement API (client.getArrowElement). Triggers on any task involving Velt Arrows, drawn arrow pins, arrow annotations, directional pointing UI, design-review arrows, the VeltArrows / VeltArrowTool / velt-arrows / velt-arrow-tool web components, or ArrowAnnotation — even when the user does not explicitly say 'Velt' or 'arrows'.

0
installs
▌
Velt Huddle Best Practices · velt-js bundle
Velt Huddle implementation patterns and best practices for React, Next.js, and web applications. Use when adding audio/video/screen sharing huddles, in-app voice or video calls, ephemeral chat within huddles, flock mode (follow me), cursor-mode huddle bubbles, or huddle webhook integration. Triggers on any task involving huddles, video calls, audio calls, screen sharing sessions, VeltHuddle, VeltHuddleTool, or collaborative real-time communication features — even if the user doesn't explicitly say 'huddle'.

0
installs
▌
Velt Cursors Best Practices · velt-js bundle
Velt Cursors implementation patterns and best practices for React, Next.js, and web applications. Use when adding real-time cursor tracking, collaborative cursor sharing, avatar-mode cursors, cursor element whitelisting, cursor inactivity timeouts, cursor position subscriptions, customizing the cursor pointer wireframe and its flat-config componentConfig template variables (cursorUser, showAvatar / showAudio / showVideo, huddle-on-cursor flags, helper functions), or customizing the Live Selection remote-user indicator wireframe (VeltSelectionElementPortalWireframe / velt-selection-element-portal, live-selection, selection-element-portal, userIndicatorPosition / userIndicatorType, selections). Triggers on any task involving live cursors, collaborative cursor display, live selection indicators, VeltCursor, VeltCursorPointerWireframe, VeltSelection*, cursor tracking on canvas or whiteboard, or showing where other users are pointing or selecting — even if the user doesn't explicitly say 'cursors' or 'live-selecti

0
installs
▌
Velt Activity Best Practices · velt-js bundle
Velt Activity Logs implementation patterns and best practices for React, Next.js, and web applications. Use when adding real-time activity feeds, custom activity logging, audit trails, CRDT debounce configuration, server-side activity management via REST API, customizing the Activity Log wireframe with template variables (velt-data, velt-if, velt-class), or composing the VeltActivityLogWireframe sub-component tree (Header, Filter, List, DateGroup, Item, ShowMore, Empty, Loading).

0
installs
▌
Velt Comments Best Practices · velt-js bundle
Velt Comments implementation patterns and best practices for React, Next.js, and web applications. Use when adding collaborative commenting features, comment modes (Freestyle, Popover, Stream, Text, Page), rich text editor comments (TipTap, SlateJS, Lexical), Apryse WebViewer (PDF/docx) comments, media player comments, chart comments, comments sidebar setup and customization (embed mode, floating mode, focused thread, V2 sidebar), sidebar filtering with accessModes for privacy, isAnnotationPrivate() visibility routing, CommentDialogActionService.isSubmitInFlight() for duplicate-submit guards, VeltCommentDialogAgentSuggestion primitives for AI suggestion accept/reject UIs, agent comment annotations via REST API (agent block with agentSource/agentId/executionId, agent-specific GET filters, suggestionAccepted/suggestionRejected client events, sourceType "agent" UI rendering), or binding Comment Bubble / Comment Dialog / Comment Tool wireframe slots via template variables (velt-data, velt-if, velt-class).

0
installs
▌
Velt Node Sdk Best Practices · velt-js bundle
Velt Node SDK (`@veltdev/node`) implementation patterns for Node.js / TypeScript backends. Use whenever the user is writing server-side code that integrates with Velt — initializing `VeltSDK`, calling `sdk.api.*` (REST API services like Organizations, Documents, Comment Annotations, etc.) or `sdk.selfHosting.*` (MongoDB+S3 self-hosted services like Comments, Reactions, Attachments), generating JWT auth tokens for the frontend SDK from Node, configuring MongoDB or AWS S3 for self-hosting, handling the SDK's typed error classes (`VeltSDKError`, `VeltDatabaseError`, `VeltValidationError`, `VeltTokenError`, `VeltApiError`), debugging response-envelope mismatches between the two backends, or shipping Node code that talks to Velt in any way. Triggers on any mention of `@veltdev/node`, `VeltSDK`, `sdk.api`, `sdk.selfHosting`, Velt server-side Node.js, MongoDB-backed Velt storage, or env-var auth (`VELT_API_KEY` / `VELT_AUTH_TOKEN`) — even if the user doesn't say "Node SDK" explicitly.

0
installs
▌
Velt Presence Best Practices · velt-js bundle
Velt Presence implementation patterns and best practices for React, Next.js, and web applications. Use when adding user presence avatars, online/away/offline status indicators, real-time cursor tracking, inactivity timeout configuration, location-based presence filtering, presence data subscriptions, or flock mode (follow me) shared navigation sessions with enableFlockMode, startFollowingUser, stopFollowingUser, onNavigate callback, and defaultFlockNavigation. Triggers on any task involving user presence, active user avatars, who's online indicators, cursor sharing, VeltPresence, VeltCursor, follow-along features, or collaborative awareness features — even if the user doesn't explicitly say 'presence'.

0
installs
▌
Velt Recorder Best Practices · velt-js bundle
Velt Recorder implementation patterns and best practices for React, Next.js, and web applications. Use when adding audio, video, or screen recording features, recording playback, video editing, recording transcription, managing recording lifecycle events, or binding Recorder wireframe slots with template variables (velt-data / velt-if / velt-class).

0
installs
▌
Velt Rewriter Best Practices · velt-js bundle
Best practices for the Velt Rewriter — the AI text-rewriter feature that lets users select text and apply AI-generated rewrites or anchor AI-assisted comments. Use whenever the user is integrating the Velt Rewriter, calling enableRewriter/disableRewriter, subscribing to textSelected events, calling askAi (multi-provider AI generation auto-routed by model prefix across OpenAI/Anthropic/Gemini), calling replaceText to swap DOM text, calling addComment to anchor a Velt comment to a text range, toggling the default selection toolbar with enableDefaultUI/disableDefaultUI, building custom rewriter UI with the wireframe variables (componentConfig.* on velt-rewriter-text-portal-wireframe / velt-rewriter-dialog-wireframe / velt-rewriter-bottom-sheet-wireframe), or typing against RewriterAskAiRequest / RewriterReplaceTextRequest / RewriterAddCommentRequest / AiModel. Trigger even if the user does not say 'Velt' explicitly — any mention of an AI text rewriter, in-place text replacement after AI generation, selection-too

0
installs
▌
Velt Reactions Best Practices · velt-js bundle
Best practices for Velt Inline Reactions — the emoji-reaction feature for adding contextual emoji feedback to elements of your app (articles, posts, images, charts, custom UI). Use whenever the user is adding the VeltInlineReactionsSection component, binding it to a target element via targetReactionElementId, configuring custom reaction emojis (image URLs, iconUrl, or unicode emoji) via setCustomReactions, calling client.getReactionElement(), customizing the wireframe primitives (velt-reaction-tool-wireframe, velt-reaction-pin-wireframe, velt-inline-reactions-section-wireframe, and their nested reactions-panel / tooltip children), binding componentConfig.* template variables (annotation, isReactionSelectedByCurrentUser, tooltipVisible, annotations, targetReactionElementId), or reading the ReactionAnnotation data model. Trigger on any task involving Velt reactions, emoji reactions on content, inline-reactions UI, contextual emoji feedback, or VeltInlineReactionsSection — even if the user does not explicitly sa

0
installs
▌
Velt REST Apis Best Practices · velt-js bundle
Velt REST API v2 and webhook best practices for server-side integration. Use when calling Velt REST API v2 endpoints, generating JWT tokens for frontend authentication, handling Velt webhooks (comment events, huddle events, CRDT updates), managing users/documents/organizations via REST, or implementing server-side Velt operations. Triggers on any task involving Velt REST API, JWT token generation for Velt, Velt webhooks, x-velt-api-key headers, or server-side comment/notification/activity management — even if the user doesn't explicitly say 'REST API'. For the Python SDK (velt-py) for self-hosting, see velt-self-hosting-data-best-practices instead.

0
installs
▌
Velt Suggestions Best Practices · velt-js bundle
Velt Suggestions implementation patterns and best practices for React, Next.js, and web applications. Use when adding suggestion mode (propose-then-review workflow), AI agent suggestion comments, accept/reject flows, suggestion targets on form inputs or custom components, suggestion status lifecycle (pending/accepted/rejected/stale), drift detection, or querying suggestions programmatically. Triggers on any task involving Velt suggestions, suggestion mode, data-velt-suggestion-target, SuggestionElement, useSuggestionUtils, enableSuggestionMode, commitSuggestion, suggestionAccepted, suggestionRejected, or building a propose-and-review editing workflow — even if the user doesn't explicitly say 'suggestions'.

0
installs
▌
Velt Proxy Server Best Practices · velt-js bundle
Velt proxy server setup and configuration best practices for routing Velt SDK traffic through your own reverse proxy (nginx or Cloudflare Workers). Use when configuring proxyConfig on VeltProvider or initVelt, setting up nginx or Cloudflare Workers as a reverse proxy for Velt CDN/API/database/storage/auth endpoints, whitelisting Content Security Policy (CSP) domains for Velt, enabling Subresource Integrity (SRI), or debugging proxy-related connectivity issues. Triggers on any task involving Velt proxy, reverse proxy, proxyConfig, cdnHost, apiHost, v1DbHost, v2DbHost, storageHost, authHost, forceLongPolling, CSP whitelisting for Velt, nginx or Cloudflare Workers configuration for Velt, or network policy compliance with Velt — even if the user doesn't explicitly say 'proxy'.

0
installs
▌
Velt Notifications Best Practices · velt-js bundle
Velt Notifications implementation patterns and best practices for React, Next.js, and web applications. Use when adding in-app notifications, notification panels, email notifications via SendGrid, webhook integrations, user notification preference management, cross-organization notification feeds with enableCrossOrganization/disableCrossOrganization, or binding Notifications Panel / Notifications Tool wireframe slots with template variables (velt-data, velt-if, velt-class).

0
installs
▌
Velt View Analytics Best Practices · velt-js bundle
Best practices for Velt View Analytics — the 'who viewed this document today' indicator with a count badge, recent-viewers dialog, and date- or user-aggregated subscriptions. Use whenever the user is adding the VeltViewAnalytics component, scoping it to a sub-document via type='location' + location-id, reading unique-view counts via the React hooks (useUniqueViewsByUser / useUniqueViewsByDate) or the non-React observable form (client.getViewsElement().getUniqueViewsByUser/ByDate().subscribe), building a custom trigger or viewer-list overlay via the velt-view-analytics-wireframe / velt-view-analytics-dialog-wireframe / velt-view-analytics-bottom-sheet-wireframe tags, or binding componentConfig.* template variables (todayViewsCount, totalUniqueViewsCount, treadsVisible, userViews, bottomSheetMode). Trigger on any task involving Velt View Analytics, document view counts, recent-viewers lists, viewers-by-date trends, view aggregation, or VeltViewAnalytics customization — even when the user does not explicitly say

0
installs
▌
Velt Approval Engine Best Practices · velt-js bundle
Best practices for the Velt Approval Engine — the declarative workflow runtime for multi-step agent + human approval processes. Use whenever the user is building approval workflows, multi-step review processes, agent-then-human approval chains, parallel reviewer quorums, SLA-aware approval steps, rejection-loop retry regions, or any workflow that combines AI agents with human gatekeeping. Triggers on any task involving the Velt Approval Engine, /v2/workflow/ REST endpoints, workflow definitions (nodes/edges/groups/loops), executions dispatch with idempotencyKey, recording reviewer decisions or agent resolutions, workflow webhooks (execution.dispatched/completed/failed/cancelled, step.awaiting-approval/completed/failed/breached/cancelled, group.quorum-met, loop.iteration-started, loop.exhausted), HMAC-SHA256 webhook signature verification, SLA-routed breach edges, quorum policies (waitAll/cancelOnQuorum/joinOnQuorum), onReject shorthand, loop regions, or recovering missed webhook events via /executions/getEven

0
installs
▌
Velt Live State Sync Best Practices · velt-js bundle
Velt Live State Sync implementation patterns and best practices for React, Next.js, and web applications. Use when adding real-time shared state, syncing data across clients, Redux store synchronization, or live variables. Triggers on any task involving Velt live state, useLiveState, useSetLiveStateData, useLiveStateData, useLiveStateSyncUtils, createLiveStateMiddleware, getLiveStateSyncElement, live state broadcast API, real-time collaborative state, or building shared-state features — even if the user doesn't explicitly say 'live state sync'.

0
installs
▌
Velt Chat Sdk Adapter Best Practices · velt-js bundle
Velt Chat SDK Adapter implementation patterns and best practices for building bots that integrate with Velt comment threads. Use when building a bot (greeting bot, AI bot, support bot) that responds to @-mentions in Velt comments, handling webhook events from Velt (comment.add, comment.reaction_add), configuring the Chat SDK with createVeltAdapter, setting up webhook routes in Next.js or other Node.js frameworks, handling reactions on Velt comments, resolving user identities for bot responses, or deploying a Velt-connected bot to Vercel or other platforms. Triggers on any task involving @veltdev/chat-sdk-adapter, Chat SDK adapters for Velt, Velt bot integration, Velt webhook handling for comments, onNewMention, onReaction, thread.post(), or building an automated responder for Velt comment threads — even if the user doesn't explicitly say 'chat SDK adapter'.

0
installs
▌
Velt Self Hosting Data Best Practices · velt-js bundle
Velt self-hosting data implementation patterns and best practices for React, Next.js, and web applications. Use when storing sensitive user-generated content (comments, attachments, reactions, recordings, user PII) on your own infrastructure instead of Velt servers, implementing data providers (endpoint-based or function-based), building backend API routes, or debugging data provider events.

0
installs
▌
Velt Single Editor Mode Best Practices · velt-js bundle
Velt Single Editor Mode implementation patterns and best practices for React, Next.js, and web applications. Use when implementing exclusive editing access, editor/viewer role management, access request handoff flows, element-level sync control, timeout-based editor transfer, or multi-tab editing restrictions.

0
installs

26 published skills