Skip to main content

​
Quickstart guide

This guide will help you create your first collaborative document and invite team members to collaborate in real-time.

​
Prerequisites

Before you begin, make sure you have:
  • Completed the installation setup
  • The application running on http://localhost:3000
  • A valid email address for authentication

​
Create your first document

1

Sign in to your account

Navigate to http://localhost:3000 and click the sign-in button. You’ll be redirected to the Clerk authentication page.
// Authentication is handled by Clerk
import { SignIn } from '@clerk/nextjs'

const SignInPage = () => {
  return (
    <main className="auth-page">
      <SignIn />
    </main>
  )
}
Create an account using your email address. After signing in, you’ll be redirected to your documents dashboard.
2

Start a blank document

On the home page, click the “Start a blank document” button. This will create a new document and redirect you to the editor.
// Document creation from AddDocumentBtn component
const addDocumentHandler = async () => {
  try {
    const room = await createDocument({ userId, email });

    if(room) router.push(`/documents/${room.id}`);
  } catch (error) {
    console.log(error)
  }
}
Each document is created with:
  • A unique room ID (generated using nanoid)
  • Default title “Untitled”
  • Full write access for the creator
  • Your email as the owner
3

Edit your document

You’re now in the editor. Start typing to create content. As the document creator, you have full editing capabilities:
  • Format text: Use the toolbar to apply bold, italic, and other formatting
  • Add headings: Structure your content with heading styles
  • Edit title: Click the edit icon next to the document title to rename it
// Title updates are saved automatically
const updateTitleHandler = async (e: React.KeyboardEvent<HTMLInputElement>) => {
  if(e.key === 'Enter') {
    setLoading(true);
    try {
      if(documentTitle !== roomMetadata.title) {
        const updatedDocument = await updateDocument(roomId, documentTitle);
        if(updatedDocument) {
          setEditing(false);
        }
      }
    } catch (error) {
      console.error(error);
    }
    setLoading(false);
  }
}
All changes are saved automatically and synced in real-time with Liveblocks.
4

Invite collaborators

Click the “Share” button in the top-right corner to invite others to your document.
  1. Enter the collaborator’s email address
  2. Select their access level:
    • Editor: Can view and edit the document
    • Viewer: Can only view the document (read-only)
  3. Click “Invite” to send the invitation
// Sharing logic from ShareModal component
const shareDocumentHandler = async () => {
  setLoading(true);
  await updateDocumentAccess({ 
    roomId, 
    email, 
    userType: userType as UserType, 
    updatedBy: user.info,
  });
  setLoading(false);
}
The invited user will receive an inbox notification and can immediately access the document.
Only users with “editor” permissions can invite new collaborators. Viewers cannot share documents.
5

Collaborate in real-time

When collaborators join your document, you’ll see:
  • Active collaborators: Avatar badges showing who’s currently viewing the document
  • Live cursors: See where other users are typing in real-time
  • Presence indicators: Know when collaborators join or leave
Try these collaboration features:
  • Add comments: Select text and add threaded comments
  • Reply to comments: Engage in discussions about specific content
  • Resolve threads: Mark comment threads as resolved when addressed
// Comments are rendered with Liveblocks components
const Comments = () => {
  const { threads } = useThreads();
  return (
    <div className="comments-container">
      <Composer className="comment-composer" />
      {threads.map((thread) => (
        <ThreadWrapper key={thread.id} thread={thread} />
      ))}
    </div>
  )
}

​
What’s next?

Now that you’ve created your first collaborative document, explore more features:

​
Common actions

​
Delete a document

Only the document creator or users with editor permissions can delete documents:
  1. Click the delete icon (trash can) in the toolbar
  2. Confirm the deletion in the modal dialog
  3. You’ll be redirected to the home page

​
Manage collaborators

From the Share modal, you can:
  • View all current collaborators
  • Change a collaborator’s permission level
  • Remove collaborators (except yourself)
  • See who created the document

​
View all your documents

The home page displays all documents you have access to, showing:
  • Document title
  • Creation timestamp (e.g., “Created about 2 hours ago”)
  • Quick access to open or delete documents

Build docs developers (and LLMs) love

Get started for freeTalk to us