Real-time collaborative editing
CodeMirror edits a shared Y.Text document. Liveblocks distributes Yjs updates and presence, so concurrent changes merge without an exclusive document lock.
Scribe / Collaborative Markdown workspace
A real-time collaborative Markdown editor.
Edit with multiple users, review Markdown suggestions and comments, navigate linked knowledge, compare versions, and retain local work during temporary connection loss.
Built with Next.js, TypeScript, CodeMirror, Yjs, Liveblocks, Convex, Clerk, and IndexedDB.
- Document model
- Yjs CRDT with a shared Y.Text
- Access model
- Four roles enforced server-side
- Persistence
- Live, local, and durable paths
PRODUCT PREVIEW
The editor, review tools, and document state in one view
This static preview mirrors the authenticated editor. The deployed application uses CodeMirror and a shared Yjs document.
MD
Authorization design
All changes saved
Owner
KPAR
2 onlineMarkdown
1#Authentication flow
2
3##Requirements
4-Workspace membership controls document access.
5-Share links grant viewer, commenter, or editor access.
6-Room permissions cannot exceed the document role.
7
8##Request flow
91.Clerk authenticates the user.
102.Convex resolves document access.
113.The server grants Liveblocks room permissions.
12The client joins the shared Y.Text document.
Preview
Authentication flow
Requirements
- Workspace membership controls document access.
- Share links grant viewer, commenter, or editor access.
- Room permissions cannot exceed the document role.
Request flow
- Clerk authenticates the user.
- Convex resolves document access.
- The server grants Liveblocks room permissions.
- The client joins the shared Y.Text document.
IMPLEMENTED CAPABILITIES
What the application implements
Each capability below is backed by the authenticated product and server-side data model, not only the landing-page preview.
Role-based document authorization
Owner, editor, commenter, and viewer roles are enforced in Convex. A server endpoint maps the verified role to read or write access for one Liveblocks room.
Contextual comments and mentions
Comments attach with Yjs relative positions and support replies, resolve/reopen, deep links, search, and permission-aware stable-identity mentions.
Markdown-native suggestions
Propose insertions, replacements, or deletions without changing source. Editors accept through a claimed, idempotent Yjs transaction or see a conflict.
Document version history
Named and automatic versions store full Markdown snapshots. Restoring a version updates Convex and replaces the active Y.Text in one transaction.
Browser-local recovery
Yjs updates are stored in IndexedDB. The editor can retain local state through refreshes and temporary connection loss before synchronizing again.
Markdown power without a block format
GFM source gains command/slash workflows, find/replace, outline, statistics, wikilinks/backlinks, sanitized preview, and portable .md export.
ARCHITECTURE
Explicit system boundaries
Scribe separates identity, application data, live collaborative state, and local browser persistence. Each layer has a specific responsibility.
Read the architecture overview (opens in a new tab)Browser
NEXT.JS / REACTCodeMirror 6
Editing surface
Y.Text
Shared CRDT document
IndexedDB
Browser-local Yjs updates
Liveblocks
Transports Yjs updates and collaborator presence between clients in the same room.
Convex
Stores documents, durable Markdown snapshots, permissions, comments, versions, shares, and notifications.
Clerk
Authenticates users and supplies signed identity and active-organization claims.
Next.js authorization endpoint
Checks the Clerk session, asks Convex for document access, and grants one room read or write access.
Identity, durable application data, live CRDT state, and browser-local recovery remain separate concerns.
DATA FLOW
How an edit is synchronized
Yjs owns the active collaborative text. Liveblocks, IndexedDB, and Convex serve different transport and persistence needs.
CodeMirror 6
Y.Text
Liveblocks → connected clients
IndexedDB → local Yjs updates
Debounced queue → Convex snapshot
Liveblocks distributes CRDT updates. IndexedDB supports browser-local recovery. Convex snapshots make the latest Markdown available to workspace queries, exports, and version history without treating every keystroke as a database mutation.
ENGINEERING DECISIONS
Design choices and tradeoffs
01
Yjs instead of text locking
CRDT operations allow local edits to remain responsive and merge after concurrent or temporarily disconnected work.
02
Separate live state from application data
Liveblocks handles latency-sensitive Yjs updates and presence. Convex owns queryable records, permissions, comments, and versions.
03
Server-derived room permissions
The browser never chooses its collaborative privileges. The authorization endpoint derives them from the current Convex document role.
04
Snapshots alongside CRDT state
Debounced Markdown snapshots make content available to the application backend and provide recoverable version checkpoints.
TECHNOLOGY
Stack responsibilities
The project uses each dependency for a defined part of the system.
- Next.js / React
- Routes, application UI, provider boundaries, and the room authorization endpoint
- TypeScript
- Frontend, backend functions, shared generated data types, and tests
- CodeMirror 6
- Markdown editing surface, keymaps, selection APIs, and formatting commands
- Yjs
- CRDT document model, shared Y.Text, awareness, and relative comment positions
- Liveblocks
- Yjs transport, room lifecycle, collaborator presence, and room access tokens
- Convex
- Durable data, reactive queries, document roles, comments, versions, and share policy
- Clerk
- User authentication, profile identity, organizations, and signed Convex JWTs
- IndexedDB
- Browser-local persistence for Yjs document updates
Inspect the implementation
Open the application, create a document, or read the source and architecture notes.