Collaborative Editing with Y-Sweet

In this example, we use Y-Sweet to let multiple users collaborate on a single BlockNote document in real-time.

Try it out: Open the Y-Sweet BlockNote demo in multiple browser tabs to see it in action!

Relevant Docs:

"use client";

import { useYDoc, useYjsProvider, YDocProvider } from "@y-sweet/react";
import { useCreateBlockNote } from "@blocknote/react";
import { BlockNoteView } from "@blocknote/mantine";

import "@blocknote/mantine/style.css";

export default function App() {
  const docId = "my-blocknote-document";

  return (
    <YDocProvider
      docId={docId}
      authEndpoint="https://demos.y-sweet.dev/api/auth"
    >
      <Document />
    </YDocProvider>
  );
}

function Document() {
  const provider = useYjsProvider();
  const doc = useYDoc();

  const editor = useCreateBlockNote({
    collaboration: {
      provider,
      fragment: doc.getXmlFragment("blocknote"),
      user: { color: "#ff0000", name: "My Username" },
    },
  });

  return <BlockNoteView editor={editor} />;
}

"use client";import { useYDoc, useYjsProvider, YDocProvider } from "@y-sweet/react";import { useCreateBlockNote } from "@blocknote/react";import { BlockNoteView } from "@blocknote/mantine";import "@blocknote/mantine/style.css";export default function App() {  const docId = "my-blocknote-document";  return (    <YDocProvider      docId={docId}      authEndpoint="https://demos.y-sweet.dev/api/auth"    >      <Document />    </YDocProvider>  );}function Document() {  const provider = useYjsProvider();  const doc = useYDoc();  const editor = useCreateBlockNote({    collaboration: {      provider,      fragment: doc.getXmlFragment("blocknote"),      user: { color: "#ff0000", name: "My Username" },    },  });  return <BlockNoteView editor={editor} />;}

Collaborative Editing with Y-Sweet

Learn

Collaborate

Community

Legal

Theme