skills.rest
velt-js
velt-jsOFFICIAL
Explore all skills by this author →
Website𝕏@veltjsGitHub

velt-single-editor-mode-best-practices

Implements Velt Single Editor Mode with exclusive editing, access requests, and element sync control.

1|Updated Jan 23, 2026
Search Tags:#collaboration#React#access control#nextjs#real-time sync#velt#single editor mode
One-click install
npx skills add https://github.com/velt-js/agent-skills --skill velt-single-editor-mode-best-practices-velt-js
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: velt-single-editor-mode-best-practices
Source: https://github.com/velt-js/agent-skills/tree/main/skills/velt-single-editor-mode-best-practices
Command: npx skills add https://github.com/velt-js/agent-skills --skill velt-single-editor-mode-best-practices-velt-js

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @veltdev/react, and includes references (resource) components.

What problem does it solve? Collaborative documents break when multiple users edit simultaneously without coordination. This Skill provides evidence-backed implementation patterns for Velt's Single Editor Mode, ensuring only one user edits at a time while others see live-synced read-only content. ## Core Features & Use Cases - Exclusive Editing Setup: Enable Single Editor Mode with enableSingleEditorMode, VeltSingleEditorModePanel, container scoping via singleEditorModeContainerIds, and auto-sync for text elements. - Access Request Handoff: Build editor-side accept/reject flows and viewer-side request/cancel flows using hooks like useEditorAccessRequestHandler and APIs like requestEditorAccess. - Timeout & Multi-Tab Handling: Configure editor access timeouts with auto-transfer, handle tab locking with editCurrentTab, and subscribe to all 7 SEM event types. - Use Case: When two users open the same Next.js document page, the first claims the editor role automatically while the second sees a read-only synced view with a banner showing who is editing, and can request access that the editor accepts or rejects. ## Quick Start Ask the agent to set up Velt Single Editor Mode for your React document page with an editor status banner and live content sync.

Frequently Asked Questions about velt-single-editor-mode-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I set up Velt Single Editor Mode in React?▼

Call enableSingleEditorMode with config options via useLiveStateSyncUtils, render the VeltSingleEditorModePanel component, and claim the editor role with setUserAsEditor once useVeltInitState is truthy. Add data-velt-sync-access and data-velt-sync-state attributes to your content element for read-only enforcement and live sync.

How to handle editor access requests in Velt?▼

The editor subscribes via useEditorAccessRequestHandler or isEditorAccessRequested, then responds with acceptEditorAccessRequest or rejectEditorAccessRequest. Viewers call requestEditorAccess and subscribe to the returned Observable, which emits null for pending, true for accepted, or false for rejected.

Why is setUserAsEditor not working in my Velt integration?▼

The most common cause is calling setUserAsEditor before Velt is fully initialized. Gate the call on useVeltInitState only, never on useCurrentUser or setTimeout delays, and handle all three error codes including another_user_editor and same_user_editor_different_tab.

Does data-velt-sync-access work on React components?▼

No, data-velt-sync-access and data-velt-sync-access-disabled only work on native HTML elements like div, button, and input. Wrap React components in a native element carrying the attribute to place them under Single Editor Mode control.

Can I scope Single Editor Mode to only part of my page?▼

Yes, call singleEditorModeContainerIds with an array of element IDs to restrict SEM to specific containers. Elements outside those containers, such as navigation and toolbars, remain interactive for all users including viewers.

How do I prevent editing in multiple browser tabs with Velt?▼

Set singleTabEditor to true in enableSingleEditorMode config, which is the default. When useUserEditorState returns isEditor true but isEditorOnCurrentTab false, show an Edit on this tab button that calls editCurrentTab to transfer editing.

Related Skills

Explore More Software Engineering Skills→
Oz-NetworksOz-Networks
6

mirra-trello

Manage Trello boards, cards, and checklists via Mirra's SDK.

Official
Intermediate
RyanzucchiRyanzucchi

editor-rico-tiptap-extensivel

Configures a Tiptap/ProseMirror rich text editor with literary extensions for creative writing.

Community
Intermediate
PotLockPotLock

feishu-perm

Manage Feishu document and file permissions by listing, adding, or removing collaborators.

Official
Intermediate
durable-streamsdurable-streams
1.7k

yjs-editors

Integrates Yjs with TipTap v3 and CodeMirror 6 for real-time collaborative editing in React apps via durable streams and connect:false provider pattern.

Official
Advanced