> ## Documentation Index
> Fetch the complete documentation index at: https://pavan-c90e8846.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# LiveCanvas: Real-Time Collaborative Whiteboard

> LiveCanvas combines an infinite whiteboard, rich text editing, and real-time collaboration into one modern workspace built on Next.js and Convex.

LiveCanvas is a modern collaborative workspace that brings together an infinite whiteboard, a rich text editor, and real-time multiplayer editing. Built with Next.js 14 and powered by Convex realtime backend, it lets teams brainstorm, sketch, and document together without leaving the browser.

## Key Features

<CardGroup cols={2}>
  <Card title="Infinite Whiteboard" icon="paintbrush">
    Draw freely on an endless canvas powered by Excalidraw. Pan and zoom without limits to capture every idea.
  </Card>

  <Card title="Real-Time Collaboration" icon="users">
    See teammates cursors live and edit documents simultaneously with Convex-powered real-time sync.
  </Card>

  <Card title="Rich Text Editor" icon="file-pen">
    Write structured documents using Editor.js with blocks, headings, lists, and embedded media.
  </Card>

  <Card title="Workspace Management" icon="folder-open">
    Organize files into shared workspaces. Create whiteboards or documents and archive old work.
  </Card>

  <Card title="Live Cursor Presence" icon="arrow-pointer">
    Watch where others are on the canvas in real time with smooth cursor presence updates.
  </Card>

  <Card title="Authentication" icon="lock">
    Secure login with Kinde. Only invited workspace members can view or edit team content.
  </Card>
</CardGroup>

## Architecture Overview

LiveCanvas uses a lightweight three-layer architecture designed for speed and real-time updates:

```text theme={null}
            Users
              |
      Real-time Presence
              |
        Next.js Frontend
              |
      Convex Realtime Backend
              |
           Database
```

* **Frontend**: Next.js 14 App Router with React, TypeScript, Tailwind CSS, and shadcn/ui components.
* **Backend**: Convex handles mutations, queries, and real-time subscriptions over WebSockets.
* **Database**: Convex native storage persisted through the `convex/schema.ts` tables for files and users.
* **Auth**: Kinde manages authentication and session state.

## Tech Stack

| Category | Technology |
| - | - |
| Frontend | Next.js 14, React, TypeScript |
| Styling | Tailwind CSS, shadcn/ui |
| Backend | Convex realtime |
| Whiteboard | Excalidraw |
| Editor | Editor.js |
| Authentication | Kinde |
| Deployment | Vercel |

Ready to run it locally? Head to the [Quickstart](/live-canvas/quickstart) guide.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.