Get Free API Key
VeltReact Flow

Comments and co-editing, built for React Flow

Add comments and co-editing, plus live presence, to your React Flow canvas, for your users and your AI agents. Threads stay pinned to the node as the graph moves, and every agent edit lands as a suggestion your users approve, so every comment stays on the node it was about.

View DocsGet Free API Key

Free tier. No credit card. First comment in 5 minutes.

React FlowShared with your team
live
Draft
→
Review
→
Publish
Brand Agentnow

Suggested an approval node before publish, pinned to the canvas.

2 Replies
Reply in React Flow…@

The problem

Build this into React Flow yourself, and you rebuild it on every release.

Your users expect to comment and co-edit in React Flow, and your AI agents need that same canvas with a human approving before they touch user work. Comments that survive as the React Flow graph moves are a multi-quarter build, and the moment anchoring breaks, feedback lands on the wrong node. Co-editing is the harder half: rolled by hand it means overwrites, lost work, and merge conflicts, the "my changes disappeared" bug reports, plus a websocket fleet and offline merge to keep alive. And the harder question is your agents: a useful agent needs to change the work, but an agent with write access to user content is what your buyers' security review blocks, so without a consent step you choose between an agent that is useful and an agent that is safe. Every quarter spent on this is a quarter not spent on your own product.

Velt is the review and collaboration layer built for React Flow: your users and your AI agents work the same canvas, with comment threads anchored to the node, and every agent suggestion is a change a human approves before it lands.

Features

Everything your team and your agents need on React Flow

01agents
Review Agent2m

Clause 7 omits a liability cap. Suggested fix attached.

1 Reply
// agents.tsx
// An agent posts a suggestion as a first-class user.
await velt.comments().add({ author: agent, suggestion });
// On approve, the change fires through your webhook.

Agents as first-class users

An agent proposes a node or layout change on the canvas as a suggestion, as a first-class user; your user approves or rejects, and on approve the change fires through your webhook with a permanent record of who allowed what.

02comments
Assigned toKim
Rogers2m

@Maya pulled into the thread

2 Replies
// comments.tsx
import { VeltComments } from "@veltdev/react";

<VeltComments textMode />

Comments

Threaded comments on nodes and edges, with replies, @mentions, reactions, and attachments, that stay pinned to the node as the graph moves.

03co-editing
TiptapLexicalCodeMirrorBlockNoteReact Flow

plus the core library for your own editor, whiteboard, or grid

// co-editing.tsx
import { useVeltCrdtExtension } from "@veltdev/tiptap-crdt-react";

const extension = useVeltCrdtExtension({ editorId });

Co-editing

CRDT co-editing of the graph, so two people move nodes and add edges without overwrites or merge conflicts.

04presence
On this document6 here
5 people · 1 agentmaxUsers collapses the rest
Mayaediting slide 4
Devviewing
Sarahviewing
Review Agentreviewing clause 7
Chrisidle 5m
Youediting
// presence.tsx
import { VeltPresence, VeltCursor } from "@veltdev/react";

<VeltPresence />
<VeltCursor />

Presence and cursors

Live named cursors and who is here right now, on the canvas.

05notifications
NotificationsFor You
For YouDocumentAll
Now

Maya mentioned you on Q3 forecastmention

“@you can you review before Friday?”

2m

Sarah replied on the Q3 threadreply

forecast.xlsx · cell B12

9m

Ethan requested your sign-offsign-off

contract.pdf · due today

1h
// notifications.tsx
import { VeltNotificationsTool } from "@veltdev/react";

<VeltNotificationsTool />

Notifications

In-app, email, and Slack alerts on every comment and @mention, so a review never stalls.

06recording
FCforecast.xlsx / Q3
live
recorder note · pinned to C18
0:42

“The variance comes from the vendor rate change, see row 18.”

// recording.tsx
import { VeltRecorderControlPanel } from "@veltdev/react";

<VeltRecorderControlPanel />

Recording

Pin a quick voice, screen, or video clip in context when showing beats typing.

07version-history
Live draftediting now · 3 collaboratorscurrent
Before pricing rewritesaved 09:14
Outline approvedsaved Mon 16:40
broadcastRestore via API reaches every connected client
// version-history.tsx
await velt.versions().save({ name: "Draft v3" });
await velt.versions().restore({ id });

Version history

Named checkpoints on the canvas, saved and restored by API.

Agent

An agent proposes a node or layout change on the canvas as a suggestion, as a first-class user; your user approves or rejects, and on approve the change fires through your webhook with a permanent record of who allowed what.

Setup

Production-ready in minutes

01INSTALL
terminal
npm install @veltdev/react @veltdev/reactflow-crdt
02PROVIDER
App.tsx
import { VeltProvider } from "@veltdev/react";

<VeltProvider apiKey={API_KEY}>
  <App />
</VeltProvider>
03MOUNT
React Flow.tsx
// Mount Velt on React Flow
<VeltComments />
// + the CRDT adapter for co-editing

Why Velt

The consent step Liveblocks does not have

Migrated from Liveblocks or Cord? Liveblocks syncs people and agents into your app's state; Velt adds the step Liveblocks does not, every agent change on React Flow is a suggestion your user approves or rejects, on the record. Compare them in our Migration Guide.

CompareMigration guide

Enterprise

Enterprise-grade security and data control

The controls your buyers' security reviews ask for, in writing.

Adding Velt to React Flow does not move that surface's content off your stack. Per-feature data providers keep comment content, attachments, and user PII on your own infrastructure; Velt stores only minimal identifiers.

View Trust CenterBook Demo

FAQ

Frequently asked questions

Comments only, or co-editing too?

Both. Comments anchor to nodes and edges; co-editing keeps the graph in sync across clients with CRDT conflict-free merge.

Do custom nodes work?

Yes. Comments and presence attach to any node type, including custom nodes.

Can two people co-edit the graph?

Yes. The CRDT adapter merges concurrent node moves, edge changes, and additions without overwrites.

Can an agent propose a change, for a human to approve?

Yes. An agent posts a node or layout suggestion as a first-class user; your user approves or rejects it, and on approve the change fires through your webhook with a permanent record.

Do I need a backend?

No. Velt runs the collaboration layer for you.

How is Velt priced?

On usage, not seats or integrations: you pay for documents with review activity in a month, with a free tier for development and early production.

Related

Explore other integrations

Konva
See all libraries

Comments and co-editing, built for React Flow

Get Free API KeyBook Demo

Free tier. No credit card.

First comment in 5 minutes.