Collaborative Editing with ElectricSQL

In this example, we use ElectricSQL to let multiple users collaborate on a single BlockNote document in real-time. The setup for this demo is more involved than the other collaboration examples, as it requires a running server and has a more fully-fledged UI. Therefore, the demo just uses an iframe element to show a hosted instance of the full ElectricSQL + BlockNote setup, which you can find the code for here.

Try it out: Open this page (or the iframe url) in a new browser tab or window to see it in action!

Relevant Docs:

• Editor Setup
• Real-time collaboration
• ElectricSQL

import "./style.css";

export default function App() {
  return (
    <iframe
      src="https://blocknote-electric-example.vercel.app/"
      height="100%"
      width="100%"
    />
  );
}

iframe {
  border: none;
}