shadcn.io is not affiliated with official shadcn/ui
Collaborative Editing Comments Block for Svelte
A shared draft in three paragraphs with locks: whoever edits a paragraph holds it, free paragraphs offer Edit with Save and Release, locked ones offer Ask to release, and two scripted teammates lock and save in turn.
Installation
Overview
Edit one draft with other people without overwriting each other, with this paragraph-lock editor for Svelte with Ark UI. A compact header names the draft and holds a Pause teammates button. The first band shows who is in the draft and what each person is doing. Under it three paragraphs sit on a rail: the rail shows the initials of whoever holds a paragraph and the row says "Wrenna is editing". A free paragraph offers Edit, which gives you its lock, a Textarea and Save and Release; a locked one offers "Ask Wrenna to release", which only notes the request. Two teammates are a script: a few steps four seconds apart that lock, save and release paragraphs once and then stop, so you can watch a lock appear and a paragraph change. A line under the draft says when it was last saved and how many times in this demo. It is built from Textarea, Button, Shine Button, Avatar and Guides, with a CSS entrance only. For writing tools and wikis where two people can open the same page.
FAQ
Who are the other people?
They are a script, not people: five steps in SCRIPT, one every four seconds (Wrenna saves paragraph 2, Hartley takes and saves paragraph 3, Wrenna takes and releases paragraph 1), and then it stops. A step that cannot happen, because you hold that paragraph, is skipped with a note. Pause teammates stops the clock and Resume plays on; with reduced motion on, they start paused.
How do the locks work?
A paragraph has one holder at most. You can take a free paragraph (and only one at a time), and nobody else can edit it until you save or release it. Save writes your text to the paragraph and frees it; Release frees it and drops your changes. Asking someone to release only records that you asked in this demo.
What stays local, and how do I make it real?
Everything; nothing is shared, saved or sent. For real, keep each lock on the server with an owner and an expiry that a heartbeat renews, broadcast lock changes over a socket, save a paragraph with the version it was based on, and release locks of people who disconnect. For finer collaboration, replace paragraph locks with a CRDT.
Is it accessible?
The rail initials are hidden from screen readers and the state is in words in every row ("Free to edit", "You are editing"). Taking a lock moves focus into the editor, saving or releasing returns it to the paragraph's button, and one polite line speaks what changed, including what the script did. Pause teammates is a real button, and the script is off when reduced motion is on.