Skip to main content
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

Infinite Whiteboard

Draw freely on an endless canvas powered by Excalidraw. Pan and zoom without limits to capture every idea.

Real-Time Collaboration

See teammates cursors live and edit documents simultaneously with Convex-powered real-time sync.

Rich Text Editor

Write structured documents using Editor.js with blocks, headings, lists, and embedded media.

Workspace Management

Organize files into shared workspaces. Create whiteboards or documents and archive old work.

Live Cursor Presence

Watch where others are on the canvas in real time with smooth cursor presence updates.

Authentication

Secure login with Kinde. Only invited workspace members can view or edit team content.

​
Architecture Overview

LiveCanvas uses a lightweight three-layer architecture designed for speed and real-time updates:
  • 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

Ready to run it locally? Head to the Quickstart guide.