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} />;
}