TipTap Cloud

npm install @tiptap-pro/provider yjs

import { TiptapCollabProvider } from "@tiptap-pro/provider";
import * as Y from "yjs";
import { SuperDoc } from "superdoc";

const APP_ID = "your-app-id";
const TOKEN = "your-token";
const DOCUMENT_NAME = "my-document";

// Create Yjs document
const ydoc = new Y.Doc();

// Create TipTap Cloud provider
const provider = new TiptapCollabProvider({
  appId: APP_ID,
  name: DOCUMENT_NAME,
  document: ydoc,
  token: TOKEN,
});

// Wait for sync
provider.on("synced", () => {
  const superdoc = new SuperDoc({
    selector: "#editor",
    documentMode: "editing",
    user: {
      name: "John Smith",
      email: "[email protected]",
    },
    modules: {
      collaboration: { ydoc, provider },
    },
  });
});

import { useEffect, useRef, useState } from "react";
import { TiptapCollabProvider } from "@tiptap-pro/provider";
import * as Y from "yjs";
import { SuperDoc } from "superdoc";
import "superdoc/style.css";

const APP_ID = import.meta.env.VITE_TIPTAP_APP_ID;
const TOKEN = import.meta.env.VITE_TIPTAP_TOKEN;

export default function Editor() {
  const superdocRef = useRef<SuperDoc | null>(null);
  const [users, setUsers] = useState<any[]>([]);

  useEffect(() => {
    if (!APP_ID || !TOKEN) return;

    const ydoc = new Y.Doc();
    const provider = new TiptapCollabProvider({
      appId: APP_ID,
      name: "document-123",
      document: ydoc,
      token: TOKEN,
    });

    provider.on("synced", () => {
      superdocRef.current = new SuperDoc({
        selector: "#superdoc",
        documentMode: "editing",
        user: {
          name: `User ${Math.floor(Math.random() * 1000)}`,
          email: "[email protected]",
        },
        modules: {
          collaboration: { ydoc, provider },
        },
        onAwarenessUpdate: ({ states }) => {
          setUsers(states.filter((s) => s.user));
        },
      });
    });

    return () => {
      superdocRef.current?.destroy();
      provider.destroy();
    };
  }, []);

  return (
    <div>
      <div className="users">
        {users.map((u, i) => (
          <span key={i} style={{ background: u.user?.color }}>
            {u.user?.name}
          </span>
        ))}
      </div>
      <div id="superdoc" style={{ height: "100vh" }} />
    </div>
  );
}

// Connection status
provider.on("status", ({ status }) => {
  // 'connecting' | 'connected' | 'disconnected'
  console.log("Connection status:", status);
});

// Sync status
provider.on("synced", () => {
  console.log("Document synced");
});

// Authentication error
provider.on("authenticationFailed", ({ reason }) => {
  console.error("Auth failed:", reason);
});

// Always clean up
provider.destroy();
superdoc.destroy();