Get real-time collaboration working in 5 minutes using Liveblocks - no server required.
This guide uses Liveblocks because it’s the fastest way to get started. See all providers for alternatives. Prerequisites
Step 1: Get Your API Key
- Go to liveblocks.io and create an account
- Create a new project
- Copy your Public API Key (starts with
pk_)
Step 2: Install Dependencies
npm install @liveblocks/client @liveblocks/yjs yjs
Step 3: Add the Code
import { useEffect, useRef } from 'react';
import { createClient } from '@liveblocks/client';
import { LiveblocksYjsProvider } from '@liveblocks/yjs';
import * as Y from 'yjs';
import { SuperDoc } from 'superdoc';
import 'superdoc/style.css';
const client = createClient({
publicApiKey: 'pk_your_public_key'
});
export default function Editor() {
const superdocRef = useRef<SuperDoc | null>(null);
useEffect(() => {
// Enter a room (document ID)
const { room, leave } = client.enterRoom('my-document');
// Create Yjs document and provider
const ydoc = new Y.Doc();
const provider = new LiveblocksYjsProvider(room, ydoc);
// Wait for sync before creating editor
provider.on('sync', (synced: boolean) => {
if (!synced) return;
superdocRef.current = new SuperDoc({
selector: '#superdoc',
documentMode: 'editing',
user: {
name: 'User ' + Math.floor(Math.random() * 1000),
email: '[email protected]'
},
modules: {
collaboration: { ydoc, provider }
}
});
});
// Cleanup on unmount
return () => {
superdocRef.current?.destroy();
provider.destroy();
leave();
};
}, []);
return <div id="superdoc" style={{ height: '100vh' }} />;
}
Step 4: Test It!
- Open your app in two browser windows
- Start typing in one window
- Watch changes appear in real-time in the other window
You now have real-time collaboration working!
What’s Happening?
- Liveblocks handles the WebSocket connection and data sync
- Yjs manages the document state and conflict resolution
- SuperDoc renders the editor and syncs with Yjs
Adding User Presence
Show who’s currently editing:
const superdoc = new SuperDoc({
// ... other config
onAwarenessUpdate: ({ states }) => {
const users = states.filter(s => s.user);
console.log('Active users:', users);
// Update your UI
updateUserList(users.map(u => ({
name: u.user.name,
color: u.user.color
})));
}
});
Environment Variables
For production, use environment variables:
const client = createClient({
publicApiKey: import.meta.env.VITE_LIVEBLOCKS_PUBLIC_KEY
// or process.env.NEXT_PUBLIC_LIVEBLOCKS_KEY for Next.js
});
Next Steps
