LiveStateData Class

SingleEditorLiveStateData Class

requestEditorAccess Class:

SingleEditorConfig Class

UserEditorAccess Class

Velt

Release Notes

Community

Get API Key

LiveStateData

Quickstart for React. For other frameworks like `vue`, `angular`, `svelte`, `vanilla js` etc. check out the setup guide.

Quickstart

Steps to integrate Velt into an existing app

1. Install

Autheticate your logged in users with the SDK.

2. Authenticate

A Document is the space where you want your users to collaborate. For a design tool it's the canvas. For a video editor, it's the editor. For a documentation tool, it's the document etc. A document is like a virtual house. Users in the same virtual house can see and interact with each other.

3. Initialize Document

Advanced Setup Options

Set Document

Set Location

Use Multiple Locations at once

Remove Locations

Your users can add comments in context to ask questions, leave feedback, report bugs etc. We handle all complexity to ensure the comments are robust against content changes. We support many types of comment UX patterns as illustrated below.

Overview

Comments

Provide a toggleable sidebar to view and filter comments.

Comments Sidebar

Setup

Customize Behavior

Arrows

The Recorder allows your users to create audio, screen, and video recordings all with the click of a button.

Recorder

View Analytics

Notifications

This process outlines the steps to add custom notifications to our Notifications component through an API.

Add Custom Notification

Your users can see other users online on the document. This makes your app feel alive.

Your users can view each other's cursors when interacting on the same document. This makes your app more alive. We handle the complexity of adapting the cursors to different screen sizes, differences in content etc.

This is like Figma's follow along feature. Start a shared session in a click. One person is the leader, and whatever they do - like clicking, scrolling, or navigating - happens automatically on everyone else's screen.

Enable slack-style effortless audio, video and screen sharing discussions inside your own product. It even comes with built in chat.

Huddle Webhooks

Your users can see what part of the document others are interacting with in real-time.

Allow users to sync state across forms in different clients

Redux Middleware

Lock down forms or settings dashboards so only a single editor can edit at once.

A widget to invite others to collaborate together on a project

Invite

Let AI suggest improvements to your website text

Rewriter

General Setup

Email Notifications

Comments Webhooks

Add Organizations

Update Organizations

Delete Organizations

Get Organizations

Update Disabled State for Organizations

Add Documents

Update Documents

Delete Documents

Get Documents

Update Access for Documents

Update Disabled State for Documents

Add Users

Update Users

Remove Users from an Organization or a Document.

Delete Users

Get Users

Add User Groups

Add Users to Groups

Delete Users from Groups

Generating Auth Tokens

Generate JWT Tokens for additional security

Property	Type	Optional	Description
`id	string	No	A unique identifier likely used for quick reference and indexing. It’s an MD5 hash of `liveStateDataId`.
`liveStateDataId`	string	No	A unique identifier for the state data being synced.
`data`	string \| number \| boolean \| JSON	No	The actual data you want to synchronize across clients.
`lastUpdated`	any	No	A timestamp or similar data indicating the last time the state data was updated.
`updatedBy`	`User`	No	The user who last updated the state data.
`tabId`	string \| null	Yes	An identifier that could be used to associate the state data with a specific tab or instance.

Property	Type	Optional	Description
`editor`	User \| null	Yes	The user who is currently editing, if any.
`requestEditorAccess`	Object \| null	Yes	Details about a request for editor access.
`tabId`	string \| null	Yes	The identifier of the tab, if applicable.

Property	Type	Optional	Description
`user`	User	No	The user requesting editor access.
`requestedAt`	any	No	The timestamp when the access was requested.
`status`	‘pending’ \| ‘accepted’ \| ‘rejected’ \| ‘cancelled’	No	The status of the access request.
`editorAccessTimeout`	number	No	Timeout duration for the editor access.
`tabId`	string \| null	Yes	The identifier of the tab related to the access request.

Property	Type	Optional	Description
`customMode`	boolean	Yes	Enables/disables custom mode. In custom mode, input elements are not disabled for the viewer.
`singleTabEditor`	boolean	No	Enables/disables editor mode on a single tab only.

Property	Type	Optional	Description
`isEditor`	boolean	Yes	Indicates whether the user has editor privileges.
`isEditorOnCurrentTab`	boolean	Yes	Indicates whether the user is an editor on the current tab.

Get Started

Key Concepts

Async Collaboration

Realtime Collaboration

In-App User Feedback

Permission Management

AI Copilot

UI Customization

Notifications

Webhooks

REST APIs

Security

API Reference

Migration

LiveStateData

`LiveStateData` Class

`SingleEditorLiveStateData` Class

`requestEditorAccess` Class:

`SingleEditorConfig` Class

`UserEditorAccess` Class

Get Started

Key Concepts

Async Collaboration

Realtime Collaboration

In-App User Feedback

Permission Management

AI Copilot

UI Customization

Notifications

Webhooks

REST APIs

Security

API Reference

Migration

​LiveStateData Class

​SingleEditorLiveStateData Class

​requestEditorAccess Class:

​SingleEditorConfig Class

​UserEditorAccess Class

`LiveStateData` Class

`SingleEditorLiveStateData` Class

`requestEditorAccess` Class:

`SingleEditorConfig` Class

`UserEditorAccess` Class