Skip to content

Conversation

@NiKrause
Copy link

Description

This PR adds a new example demonstrating real-time collaborative editing using Yjs and libp2p. The example showcases how to create a custom Yjs connection provider using libp2p instead of the standard y-webrtc connector.

What's Included

  • Complete working example: A collaborative text editor with real-time synchronization
  • Custom Yjs Provider: Libp2p-based connection provider implementing the Yjs provider interface
  • Relay Server: Standalone relay node for NAT traversal and peer discovery
  • Comprehensive Tests: Playwright tests with automated setup/teardown
  • CI Integration: Added to GitHub Actions workflow with build steps
  • Documentation: Detailed README explaining architecture, setup, and usage

Key Features Demonstrated

  • WebRTC Support: Direct peer-to-peer connections for low-latency sync
  • Circuit Relay: NAT traversal via relay servers
  • DCUTR: Direct Connection Upgrade through Relay (hole punching)
  • AutoNAT: Automatic NAT detection
  • GossipSub: PubSub-based document synchronization
  • Peer Discovery: Automatic connection to peers on the same topic
  • State Synchronization: Uses Yjs's state vector protocol for efficient syncing

Architecture

The example consists of:

  1. Browser clients that run libp2p nodes with WebRTC and Circuit Relay
  2. A relay server for bootstrapping connections and NAT traversal
  3. A custom Libp2pProvider that integrates Yjs with libp2p's pubsub

CI Improvements

  • Added build step to CI workflow for examples with build scripts
  • Conditional build logic to avoid errors for examples without build steps

Testing

The example includes comprehensive Playwright tests that:

  • Automatically start and stop the relay server
  • Test real-time synchronization between multiple browser instances
  • Verify peer discovery and connection establishment

Notes & open questions

The example provides a practical demonstration of:

  • Building custom Yjs providers for alternative transport layers
  • Configuring libp2p for browser-to-browser communication
  • Implementing NAT traversal strategies (relay + DCUTR)
  • Integrating CRDTs with decentralized networking

Change checklist

  • I have performed a self-review of my own code
  • I have made corresponding changes to the documentation if necessary (this includes comments as well)
  • I have added tests that prove my fix is effective or that my feature works

@NiKrause NiKrause closed this Oct 31, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant