@veltdev/monaco-velt-comments

Add Google Docs-style collaborative comments to your Monaco editor using the Velt Collaboration SDK.

Comment highlights are rendered as view-only overlay elements (<velt-comment-text>) positioned over the commented text — your content is never modified. Each anchor is tracked with an invisible Monaco tracking decoration (which auto-remaps across edits) plus a logical { text, occurrence } source of truth, so highlights stay glued to the text and hide cleanly when scrolled out of Monaco's virtualized viewport.

Install

npm i @veltdev/monaco-velt-comments
npm i monaco-editor   # peer dependency (provided by your app; the library uses it for types only)

Usage

Monaco has no global plugin manager, so the library is registered per-editor with the instance returned by monaco.editor.create (or @monaco-editor/react's onMount).

import * as monaco from 'monaco-editor';
import { registerVeltComments, addComment, renderComments } from '@veltdev/monaco-velt-comments';

const editor = monaco.editor.create(el, { value, language: 'typescript' });

// Register once per editor; keep the handle and dispose it on teardown.
const handle = registerVeltComments(editor, { editorId: 'my-doc' });

// Create a comment for the current selection (also wired into the command palette / context menu):
await addComment({ editor, editorId: 'my-doc' });

// Render comment annotations coming from Velt (re-run after any setValue / model swap):
renderComments({ editor, editorId: 'my-doc', commentAnnotations });

// Teardown (e.g. React unmount):
handle.dispose();

API

| Export | Purpose | |---|---| | registerVeltComments(editor, config) | Wire the integration to a Monaco editor instance; returns a VeltCommentsHandle with dispose(). | | addComment({ editor, editorId }) | Create a comment on the current selection. | | renderComments({ editor, editorId, commentAnnotations }) | Render/refresh comment highlights from Velt. | | isVeltAvailable() | Whether the Velt SDK is present on the page. |

Config (MonacoVeltCommentsConfig): editorId? (default 'monaco').

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.