Getting Started with yjs

0. Offical Document

https://github.com/yjs/yjs/blob/master/README.md

1. Getting Started

1.1 Create Template Project

pnpm create vite@latest yjs-demo --template react-ts

1.2 Remove Useless File

• App.css
• index.css

1.3 Create React Functional Components

src/components/CollaborativeDoc.tsx

import React, { useEffect, useRef, useState } from 'react'
import * as Y from "yjs";
import { WebsocketProvider } from 'y-websocket';

const yDoc = new Y.Doc();
const yText = yDoc.getText("shared-text");

const wsProvider = new WebsocketProvider(
    "ws://localhost:1234",
    "my-room",
    yDoc,
)

export default function CollaborativeDoc() {
    const [text, setText] = useState(yText.toString());
    const textAreaRef = useRef<HTMLTextAreaElement>(null);

    useEffect(() => {
        const updateText = () => {
            setText(yText.toString());
        }

        yText.observe(updateText)

        return () => {
            yText.unobserve(updateText);
        }
    }, []);


    const handleInputChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
        // Update yText when the user types
        yText.delete(0, yText.length);
        yText.insert(0, event.target.value);
    }

    return (
        <div>
            <textarea
                ref={textAreaRef}
                value={text}
                onChange={handleInputChange}
                rows={10}
                cols={10}
            ></textarea>
        </div>
    )
}

src/App.tsx

import CollaborativeDoc from './components/CollaborativeDoc'

function App() {
  return (
    <div>
      <CollaborativeDoc />
    </div>
  )
}

export default App

1.4 Run Project

Start y-websocket Server:

npx y-websocket

Start project

pnpm run dev