skills.rest
durable-streams
durable-streamsOFFICIAL
Explore all skills by this author →
WebsiteGitHub

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.

1.7k|64|Updated Dec 4, 2025
Search Tags:#collaboration#tiptap#awareness#yjs#codemirror#durable-streams#yjs-provider
One-click install
npx skills add https://github.com/durable-streams/durable-streams --skill yjs-editors
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: yjs-editors
Source: https://github.com/durable-streams/durable-streams/tree/main/packages/y-durable-streams/skills/yjs-editors
Command: npx skills add https://github.com/durable-streams/durable-streams --skill yjs-editors

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Enables real-time collaborative editing in applications by integrating Yjs with TipTap v3 and CodeMirror 6 over durable streams, providing a stable React lifecycle for doc and awareness with a provider pattern that avoids race conditions.

Core Features & Use Cases

  • Real-time co-editing across multiple editors (text, code) in React apps using YjsProvider.
  • Stable lifecycle: doc and awareness created once with useState; provider created with useEffect and connect: false to prevent missed events.
  • Supports multi-document navigation and SSR safety for collaborative editing workloads.

Quick Start

Initialize a Yjs-based collaboration by creating a Y.Doc and Awareness, then instantiate a YjsProvider with connect: false, attach listeners, and call connect() when ready.

Frequently Asked Questions about yjs-editors

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

FAQPage Schema
How do I prevent race conditions with Yjs collaborative editing in React?▼

To prevent race conditions in Yjs collaborative editing, instantiate your Y.Doc and Awareness with useState, then create the YjsProvider with connect: false to ensure listeners attach before connecting.

Can I use Yjs with TipTap v3 and CodeMirror 6 over durable streams?▼

Yes, Yjs supports real-time collaborative editing with TipTap v3 and CodeMirror 6 over durable streams, enabling stable multi-document co-editing within React applications without missing sync events.

How do I set up a YjsProvider for SSR-safe collaborative editing?▼

Setting up an SSR-safe YjsProvider involves initializing the provider with connect: false, attaching necessary event listeners securely on the client side, and calling connect() only when fully ready.

Why am I missing awareness events in my React Yjs integration?▼

Missing awareness events in Yjs often occur when the provider connects before listeners are attached; creating the provider with connect: false and manually calling connect() fixes this.

Does this Yjs integration support multi-document navigation in React?▼

Yes, this Yjs integration supports multi-document navigation by maintaining a stable React lifecycle for doc and awareness, allowing seamless transitions between collaborative editing workloads.

What is the correct React lifecycle for initializing Yjs awareness and doc?▼

The correct React lifecycle for Yjs initializes doc and awareness once using useState, while the YjsProvider is instantiated within useEffect using a deferred connection pattern to prevent race conditions.

Related Skills

Explore More Software Engineering Skills→
durable-streamsdurable-streams
1.7k

getting-started

Initialize Durable Streams with offset handling and live updates.

Official
Intermediate
durable-streamsdurable-streams
1.7k

yjs-server

Deploy Yjs collaborative editing with DS-backed durable storage via Caddy TLS proxy.

Official
Advanced
rally19rally19

tiptap

Integrate Tiptap rich text editor into React and Next.js projects.

Community
Intermediate
Muath2000Muath2000

realtime-collab-engineer

Design real-time collaboration systems with CRDT, WebSocket, and Yjs.

Community
Advanced