Examples
Collaboration
Collaborative Editing with Liveblocks

Collaborative Editing with Liveblocks

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

Try it out: Open this page in a new browser tab or window to see it in action!

Relevant Docs:

// import "@blocknote/core/fonts/inter.css";
// import "@blocknote/mantine/style.css";
 
// // .. in imports are temporary for development (vite setup)
 
// // Need to be imported before @liveblocks/react-blocknote styles
// import "@liveblocks/react-ui/styles.css";
// // Need to be imported after @liveblocks/react-ui styles
// import "@liveblocks/react-blocknote/styles.css";
 
// import { Editor } from "./Editor.jsx";
// import { Room } from "./Room.jsx";
// import "./globals.css";
 
export default function App() {
  // Renders the editor instance using a React component.
  return (
    <div>TODO</div>
    // <Room>
    //   <Editor />
    // </Room>
  );
}